简单的HTML画布未显示完整形状

Question

我是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>

我不确定为什么会这样显示，您能帮您兄弟吗？

”

画布应该看起来像下面的图像。

Answer 1

您有一种非常独特的方法来绘制圆柱体。当然，您可以通过首先绘制一个圆圈并垂直缩放上下文来完成此操作，以最终将圆扩展到一个椭圆，但让我们做一些不同。

开箱即用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>