キャンバスを使用してカラーフェードを作成するには

Question

大量のオブジェクトとイメージを描画して移動させるHTML5キャンバスがあります。これらの事のうちの1つは、私がフェードアウトして消滅させたい単色（黄色）の矩形であることがあります。

私はタイマを使うべきですか？ページ全体をクリアしてすべてを再描画し、毎回少し退色したり、キャンバス全体をクリアして再描画しない方法がありますか？

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または16進数の色を使用してすべての手順を取得して手順を指定するための手軽なコードスニペットを示します。

` /*へとから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でそれらを使用して、2つの色の間で背景色を変えることができます。