如何使用画布使颜色褪色

Question

我有一个HTML5画布，上面有大量绘制和移动的对象和图像。其中一个东西恰好是一个带有单一纯色(黄色)的矩形，我想让它淡出和消失。

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

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

Answer 2

这是我写的一个有趣的小代码片段，用来获取使用rgb或十六进制颜色的所有步骤，并指定步骤。

` /* to和from均为rgb或十六进制颜色字符串步数是一个整数，用于指定获取该颜色所需的步数*/

var getTransitionSteps = function(colorFrom, colorTo, steps) {
    var stepList = [],
        from = parseColor(colorFrom),
        to = parseColor(colorTo);

    var stepAmountR = Math.floor((to.R - from.R) / steps);
    var stepAmountG = Math.floor((to.G - from.G) / steps);
    var stepAmountB = Math.floor((to.B - from.B) / steps);

    stepList.push(colorFrom);
    for (var i = 0; i <= steps; i++) {
        var minMax;
        // Red
        minMax = stepAmountR > 0 ? Math.min : Math.max;
        from.R = minMax(from.R + stepAmountR, to.R);

        // Green
        minMax = stepAmountG > 0 ? Math.min : Math.max;
        from.G = minMax(from.G + stepAmountG, to.G);

        // Blue
        minMax = stepAmountB > 0 ? Math.min : Math.max;
        from.B = minMax(from.B + stepAmountB, to.B);
        stepList.push(from.isHex ? rgbToHex(from.R, from.G, from.B) : "rgb(" + from.R + ", " + from.G + ", " + from.B + ")");
    }
    stepList.push(colorTo);
    return stepList;
};

var parseColor = function(color) {
    var isHex = color.indexOf("#") != -1;
    if (isHex) {
        return { isHex: true, R: hexToR(color), G: hexToG(color), B: hexToB(color) };
    } else {
        var parsed = color
            .substring(4, color.length - 1)
            .replace(/ /g, '')
            .split(',');
        return {
            R: parseInt(parsed[0]),
            G: parseInt(parsed[1]),
            B: parseInt(parsed[2])
        };
    }
};

var hexToR = function(h) { return parseInt((cutHex(h)).substring(0, 2), 16); };
var hexToG = function(h) { return parseInt((cutHex(h)).substring(2, 4), 16); };
var hexToB = function(h) { return parseInt((cutHex(h)).substring(4, 6), 16); };
var cutHex = function(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h; };

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

`

然后，您可以在setTimeout或interval中使用它们在两种颜色之间转换背景色。