Question

我正试图在html5画布内设置一个圆形动画，但我在更新此圆圈时遇到麻烦AKA删除旧位置并绘制新位置我的jsfiddle：

正如你所看到的那样，clear功能并没有清除整个圆圈但是它的颜色变浅了无论如何清除旧圆圈而不清除整个画布或清除包含圆圈的小矩形？ / p>

        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

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

<强> Modified fiddle using copy composite mode

更正确的方法是使用：

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

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

所有这些方法（复合模式除外）都允许您只绘制更新所需的区域：

存储圆圈的当前位置
在下次更新时，clearRect / fillRect等圈的位置，宽度和高度。在大小上添加一个或两个像素以捕获抗锯齿像素（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

Answer 2

将此添加到您的updateCanvas方法：

ctx.clearRect(0,0,cw,ch);

jsfiddle

在画布内设置圆形动画

2 个答案: