javascript - 为 Canvas 内的圆设置动画

Question

我正在尝试在 html5 Canvas 内制作一个圆圈的动画，但在更新此圆圈(AKA 删除旧位置并绘制新位置)时遇到问题 我的jsfiddle :

如您所见，clear 函数并未清除整个圆圈，但它使其颜色变浅，无论如何，是否可以清除旧圆圈，而无需清除整个 Canvas 或清除包含该圆圈的小矩形圆圈？

        var clearCircle = function (c) {
            ctx.save();
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.arc(c.x, c.y, c.r, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.restore();
        };

Answer 1

您只需将复合模式更改为复制并在全局范围内移动即可。这将删除所有内容，但会限制您进行一次绘制操作。

<强> Modified fiddle using copy composite mode 。

更正确的方法是使用:

• clearRect(x, y, w, h) 或
• fillRect(x, y, w, h)

如果您需要背景颜色，则选择后者。如果您想用图像填充背景，也可以使用drawImage(img, x, y)。

所有这些方法(复合模式除外)都允许您仅绘制需要更新的区域:

• 存储圆的当前位置
• 在下次更新时，清除矩形/填充矩形等圆的位置和宽度和高度。在尺寸中添加一两个像素以捕获抗锯齿像素(x - 1、y - 1、w + 2、h + 2)。
• 绘制新圆圈并重复:

调整该函数采用:

var clearCircle = function (c) {
    ctx.clearRect(c.x - c.r - 1, c.y - c.r - 1, c.r*2+2, c.r*2+2);
};

<强> Modified fiddle