簡單的 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>