簡單的HTML畫布沒有顯示完整的形狀

我是 HTML 畫布的新手，我正在嘗試使用 JavaScript 繪制具有不同顏色的圓柱體，我可以看到繪圖但形狀沒有完全顯示，它應該是一個帶有顏色的完全圖解的形狀。我試圖更改寬度和高度設定，但它拉伸了形狀本身。

var canvas = document.getElementById("cylinder");
var ctx = canvas.getContext("2d");
drawCylinder(canvas, ctx,   "lightblue", "black", 3);

function drawCylinder(canvas, ctx, fill, border, lineWidth, r, centX, centY)
{
  //canvas.width = 160;
  var centX = 0;
  var centY = -100;
  var r = 30;

  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.scale(6, 1);
  ctx.beginPath();

  ctx.arc(centX, centY, r, 0, 2 * Math.PI, false);
  ctx.restore();
  ctx.fillStyle = 'YellowGreen';
  ctx.fill();
  ctx.lineWidth = 7;
  ctx.strokeStyle = 'GainsBoro';
  ctx.stroke();
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.scale(6, 1);
  ctx.beginPath();
  ctx.arc(centX, 100, r, 0, 2 * Math.PI, false);
  ctx.restore();
  ctx.fillStyle = 'MediumSlateBlue';
  ctx.fill();
  ctx.lineWidth = 7;
  ctx.strokeStyle = 'GainsBoro';
  ctx.stroke();
  ctx.save();
  ctx.lineWidth = 3;
  ctx.strokeStyle = 'Black';
  ctx.moveTo(105, 150);
  ctx.lineTo(105, 352);
  ctx.moveTo(474, 150);
  ctx.lineTo(474, 352);
  ctx.stroke();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.scale(6, 1);
  ctx.beginPath();
  ctx.arc(centX, centY 2, r 0.8, 0, Math.PI, false);
  ctx.restore();
  ctx.lineWidth = 4;
  ctx.strokeStyle = 'Black';
  ctx.stroke();
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.scale(6, 1);
  ctx.beginPath();
  ctx.arc(centX, 100 2, r 0.8, 0, Math.PI, false);
  ctx.restore();
  ctx.lineWidth = 4;
  ctx.strokeStyle = 'Black';
}

<div>
  <canvas id="cylinder" width="300" height="400"></canvas>
</div>

不知道為什么會這樣，請大哥幫忙看看。

畫布應如下圖所示。

uj5u.com熱心網友回復：

你有一種非常獨特的繪制圓柱體的方法。當然，你可以先畫一個圓，然后垂直縮放背景關系，最終將圓拉伸成橢圓，但讓我們做一些不同的事情。

開箱即用CanvasRenderingContext2D有一個繪制橢圓的內置方法，方便地稱為ellipse().

所以你可以先畫一個橢圓作為頂部，另一個橢圓作為底部，最后用黑色輪廓連接它們。

就像是：

var canvas = document.getElementById("cylinder");
var ctx = canvas.getContext("2d");
drawCylinder(canvas, ctx, "lightblue", "black", 7, 100, 0, -100);

function drawCylinder(canvas, ctx, fill, border, lineWidth, r, centX, centY) {
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  ctx.ellipse(centX, centY, r, r / 5, 0, 0, 2 * Math.PI);
  ctx.fillStyle = 'YellowGreen';
  ctx.strokeStyle = 'GainsBoro';
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.ellipse(centX, centY   100, r, r / 5, 0, 0, 2 * Math.PI);
  ctx.fillStyle = 'MediumSlateBlue';
  ctx.strokeStyle = 'GainsBoro';
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  ctx.lineWidth = 1;
  ctx.strokeStyle = 'Black';
  ctx.beginPath();
  ctx.ellipse(centX, centY, r   lineWidth / 2, r / 5   lineWidth / 2, 0, 0, 1 * Math.PI);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.ellipse(centX, centY   100, r   lineWidth / 2, r / 5   lineWidth / 2, 0, 0, 1 * Math.PI);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(centX - r - lineWidth / 2, centY);
  ctx.lineTo(centX - r - lineWidth / 2, centY   100);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(centX   r   lineWidth / 2, centY);
  ctx.lineTo(centX   r   lineWidth / 2, centY   100);
  ctx.stroke();
  ctx.closePath();
}

<canvas id="cylinder" width="300" height="400"></canvas>

標籤：javascript html jQuery css 帆布

上一篇：如何將jQuery添加到Blazor服務器應用程式？

下一篇：我的if陳述句不起作用，為什么在我重新加載頁面后仍然選中單選按鈕？