Как сделать цвет плавным, используя холст - PullRequest
Новая
       6

Как сделать цвет плавным, используя холст

1 голос
/ 27 августа 2011

У меня есть холст HTML5 с большим количеством объектов и изображений, которые рисуются и перемещаются.Одна из этих вещей - прямоугольник одного сплошного цвета (желтый), который я хотел бы сделать исчезающим и исчезающим.

Должен ли я использовать таймеры, очистить всю страницу, перерисовать все и сделать каждый раз окно немного блеклым или есть способ не очистить весь холст и перерисовать?

Ответы [ 2 ]

3 голосов
/ 27 августа 2011

Перерисовка должна быть выполнена в любом случае, так как <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);
2 голосов
/ 14 августа 2013

Вот небольшой забавный фрагмент кода, который я написал, чтобы получить все шаги, используя цвета rgb или hex, и вы указываете шаги.

` / * туда и обратно - строки цвета rgb или hex steps - это целое число, указывающее количество шагов, которые необходимо предпринять, чтобы получить цвет * / 

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 или интервале для перехода цвета фона между двумя цветами.

...