javascript - 如何使用 Canvas 使颜色褪色

Question

我有一个 HTML5 Canvas ，其中有大量正在绘制和移动的对象和图像。其中之一恰好是一个具有单一纯色(黄色)的矩形，我想让它淡出并消失。

我应该使用计时器，清除整个页面并重新绘制所有内容，并使框每次都有点褪色，还是有办法不清除整个 Canvas 并重新绘制？

Answer 1

无论如何都需要重绘，因为 <canvas>就是这样设计的。它是基于像素的，因此您不能只是说“使该矩形变亮”或类似的话。

适当的间隔是:http://jsfiddle.net/pimvdb/eGjak/84/ .

function fadeOutRectangle(x, y, w, h, r, g, b) {
    var steps = 50,
        dr = (255 - r) / steps, // how much red should be added each time
        dg = (255 - g) / steps, // green
        db = (255 - b) / steps, // blue
        i = 0, // step counter
        interval = setInterval(function() {
            ctx.fillStyle = 'rgb(' + Math.round(r + dr * i) + ','
                                   + Math.round(g + dg * i) + ','
                                   + Math.round(b + db * i) + ')';
            ctx.fillRect(x, y, w, h); // will redraw the area each time
            i++;
            if(i === steps) { // stop if done
                clearInterval(interval);
            }
        }, 30);
}

fadeOutRectangle(10, 10, 100, 100, 123, 213, 50);