画布圆圈绘制不一致

Posted

技术标签:

【中文标题】画布圆圈绘制不一致【英文标题】: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。这就是我从一开始就应该这样做的方式。出于某种原因,我打算独立管理圈子,这很混乱。你的方法可以解决它。感谢您的帮助

以上是关于画布圆圈绘制不一致的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 clearRect 不在画布上绘制移动对象

画布:将圆圈分成水平条

Android Canvas:仅在透明背景上绘制圆圈

在 UIImage 上使用 Core Graphic 绘制渐变结果不一致

在 OpenCV 中检测半圆

UG三维视图在绘制的时候定制的坐标与系统的坐标不一致,如何才能把坐标调整的和系统坐标一致呢?