画布圆圈绘制不一致
Posted
技术标签:
【中文标题】画布圆圈绘制不一致【英文标题】:Canvas Circles Draw Inconsistently 【发布时间】:2017-03-15 21:24:34 【问题描述】:例如,在同一位置绘制一个黑色圆圈,然后绘制一个半径相同的白色圆圈会留下灰色残留物。我假设它不是每次都绘制相同的圆圈,每个像素。
我希望在画布中移动一个圆圈,但为了做到这一点,我需要先覆盖圆圈,然后再将其绘制到新位置。
html:
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
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。这就是我从一开始就应该这样做的方式。出于某种原因,我打算独立管理圈子,这很混乱。你的方法可以解决它。感谢您的帮助以上是关于画布圆圈绘制不一致的主要内容,如果未能解决你的问题,请参考以下文章