具有 Apha 值的帆布绘画

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