使用Arc在JavaScript中創建圓

Question

我正在動態創建畫布，然后繪制一個圓。 但是，如圖所示，該圓顯示為拉伸和偏移：

 var max = 50; var canvas = document.createElement('canvas'); canvas.id = "mazecanvas"; var size = (document.documentElement.clientWidth / 100) * max; canvas.style.width = size + "px"; canvas.style.height = size + "px"; canvas.style.position = "absolute"; canvas.style.left = size / 2 + "px"; canvas.style.top = (document.documentElement.clientHeight / 2) - (size / 2) + "px"; document.body.appendChild(canvas); var x, y; var ctx = canvas.getContext('2d'); function circle() { ctx.globalCompositeOperation = "destination-in"; ctx.beginPath(); console.log(x, y); ctx.arc(x, y, 10, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); x = mousePos.x; y = mousePos.y; }, false); function draw() { ctx.globalCompositeOperation = "source-over"; ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < max; i++) { for (var j = 0; j < max; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 5.5 * i) + ',' + Math.floor(255 - 5.5 * j) + ',0)'; ctx.fillRect(j * (canvas.width / max), i * (canvas.height / max), canvas.width / max, canvas.height / max); } } circle(); setTimeout(draw, 10); } draw(); 

我不明白自己在做什么錯，我知道這與創建畫布有關，就像我刪除畫布並將其替換為靜態畫布一樣，問題就消失了：

 var max = 50; var canvas = document.getElementById('canvas'); var x, y; var ctx = canvas.getContext('2d'); function circle() { ctx.globalCompositeOperation = "destination-in"; ctx.beginPath(); console.log(x, y); ctx.arc(x, y, 10, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); x = mousePos.x; y = mousePos.y; }, false); function draw() { ctx.globalCompositeOperation = "source-over"; ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < max; i++) { for (var j = 0; j < max; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 5.5 * i) + ',' + Math.floor(255 - 5.5 * j) + ',0)'; ctx.fillRect(j * (canvas.width / max), i * (canvas.height / max), canvas.width / max, canvas.height / max); } } circle(); setTimeout(draw, 10); } draw(); 

 <canvas id="canvas"></canvas> 

Answer 1

設置畫布的CSS樣式將拉伸和壓縮像素。 這就是為什么您的圓變成橢圓形的原因。

而是設置畫布元素的寬度和高度。 實際上，這會在畫布上添加（或刪除）像素以達到指定的大小。 這將使您的圈子保持圓形。 ;-)

canvas.width=500;    // no need to add "px"
canvas.height=400;