简单的 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>