Question

例如，在相同位置绘制一个黑色圆圈，然后绘制相同半径的白色圆圈，留下灰色残留物。我假设每次像素都没有画出相同的圆圈。

我希望在画布中移动一个圆圈，但为了做到这一点，我需要在将其绘制到新位置之前覆盖圆圈。

HTML：

<canvas id="myCanvas" width="960" height="540" style="border:1px solid #000000;"></canvas>

使用Javascript：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);

context.beginPath();
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.strokeStyle = "white";
context.stroke();

Answer 1

每次都需要重新绘制背景。

function drawBg() {
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);
}

drawBg();
context.beginPath();
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.strokeStyle = "black";
context.stroke();

drawBg();
context.beginPath();
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.strokeStyle = "white";
context.stroke();

我对这种现象做了一些研究。我认为原因是抗锯齿。

Can I turn off antialiasing on an HTML <canvas> element?
How to anti-alias clip() edges in html5 canvas under Chrome Windows?

看来你无法在html画布上用arc()和矢量图形绘制像素完美的硬边圆圈。

画布圈不一致

1 个答案: