javascript - 为什么透明对象在动画 Canvas 元素时变得不透明？

Question

我正在尝试做一个 js 应用程序，它基本上可以在 Canvas 元素上移动一些球。我设置了 context.fillStyle = "rgba(12, 34, 56, 0.2)"; 问题是球在短时间后从透明变为不透明。我怎样才能保持它们的透明度，为什么它们会变得不透明？

这是我的代码的简化版本:

function startScript(){
var layer1       = document.getElementById("layer1");
var context1     = layer1.getContext("2d");

var posX = 5;

context1.fillStyle = "rgba(12, 34, 56, 0.05)";

animate();

function animate() {

    posX+=3;

    context1.arc(posX, 200, 5, 0, Math.PI*2);
    context1.fill();

    // request new frame
    requestAnimFrame(function() {
        animate();
    });
}
}

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

Answer 1

在绘制新线之前必须使用 context1.beginPath

否则，除了新弧之外，上下文会记住并重绘前一个弧。

此外，您应该在绘制圆弧后执行 context1.closePath()。

否则上下文将绘制一个未闭合的圆弧而不是圆。

context1.beginPath();
context1.arc(posX, 200, 5, 0, Math.PI*2);
context1.closePath();
context1.fill();