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();

为动画画布元素设置时，为什么透明对象会变得不透明？

1 个答案: