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

我正在尝试做一个js应用程序，基本上可以在画布元素上移动一些球。我设置了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);
    };
})();

最佳答案

在绘制新行之前，必须使用context1.beginPath
否则，上下文将记住并重新绘制新弧之外的上一个弧。
另外，在绘制圆弧之后，应该执行context1.closePath（）。
否则，上下文将绘制未闭合的圆弧而不是圆。

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