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

Question

我正在尝试做一个 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);
    };
})();

Answer 1

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

否则，上下文除了新的弧线外，还会记住并重绘先前的弧线。

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

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

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