Question

我绘制的红色矩形应该会顺利消失。正如你所看到的here，它有效，但它并没有完全消失。为什么呢？

(function init() {
    var canvas = document.getElementById('canvas'), ctx;
    if (!canvas.getContext) return;
    ctx = canvas.getContext('2d');

    ctx.fillStyle = "red";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.fill();

    ctx.fillStyle = "rgba(255,255,255,0.1)";
    setInterval(function() {        
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.fill();
    }, 100);
}());

它也应该同时使用许多不同的颜色和alpha值。

谢谢：D

Answer 1

这是由于画布中的舍入错误。与alpha通道相乘时的值必须削减分数以适合位图的整数性质。

在这种情况下，这里的值永远不会变成完整的alpha。

解决方法是跟踪当前的alpha级别，最后一次是手动清除。

<强> Example here

var tracker = 0,
    timer;

ctx.fillStyle = "rgba(255,255,255,0.1)";
timer = setInterval(function() {        
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.fill();
    tracker++;
    if (tracker > 43) {
        clearTimeout(timer);
        ctx.fillStyle = "rgb(255,255,255)";
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
}, 100);

画布绘画与Apha价值

1 个答案: