画布圆圈绘制不一致

Posted 2023-02-25

【中文标题】画布圆圈绘制不一致

【英文标题】：Canvas Circles Draw Inconsistently

【发布时间】：2017-03-15 21:24:34

【问题描述】：

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

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

html：

<canvas id="myCanvas"   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();

【问题讨论】：

要在网络画布上制作动画，您通常只需重绘所有移动部分（已包含缓冲：在您结束事件处理之前不会显示任何内容）。

有趣。您可以在最后一个 context.stroke() 之前添加 context.lineWidth = 2;，但这似乎很愚蠢。

我明白了。无论如何，每帧重绘所有内容似乎更好。

【参考方案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?

您似乎无法使用 arc() 和矢量图形在 html 画布上绘制像素完美的硬边圆。

【讨论】：

这是否意味着如果我有多个圆圈在移动，我需要擦除整个画布并每次重新绘制每个圆圈？

不，如果你有更多的圆圈在移动，那么首先你画背景然后你画所有的圆圈。但是你会出现这种现象。

我明白了。所以我会在每一帧都做这个drawBg。这就是我从一开始就应该这样做的方式。出于某种原因，我打算独立管理圈子，这很混乱。你的方法可以解决它。感谢您的帮助