1

キャンバスでアルファ値をスケーリングする最良の方法は何ですか?

私が解決しようとしている最初の問題は、本質的に低いアルファ値を持つスプライトを描画することです。実際より3～4倍明るく描きたいです。現在、同じ場所に4回描いています。(画像ファイルの編集ができず、globalAlpha1を超えません)

私が解決しようとしている 2 番目の問題は、複数の重なり合うスプライトの境界を描画することです。スプライトは円形ですが、波線があります。この方法を と組み合わせて使用​​すると考えましglobalCompositeOperation = 'destination-out'たが、そのためには 2 番目の描画のアルファ値を最大化する必要があります。

4

2 に答える 2

1

rgba カラーを rgb にフラット化してから rgb コンポーネント値を増やすことで、rgba カラーを「明るく」することができます。

  • 背景色も有効にして、rgba 値を rgb に変換します。
  • 結果の赤、緑、青の値をパーセンテージで増やして、色を「明るく」します。

これを行う関数を次に示します (免責事項: テストされていないコードがここにあります!):

function brighten(RGBA,bg,pct){

  // convert rgba to rgb

  alpha = 1 - RGBA.alpha/255;
  red = Math.round((RGBA.alpha*(RGBA.red/255)+(alpha*(bg.red/255)))*255);
  green = Math.round((RGBA.alpha*(RGBA.green/255)+(alpha*(bg.green/255)))*255);
  blue = Math.round((RGBA.alpha*(RGBA.blue/255)+(alpha*(bg.blue/255)))*255);

  // brighten the flattened rgb by a percentage (100 will leave the rgb unaltered)

  redBright=parseInt(  Math.min(255,red*pct/100) );
  greenBright=parseInt(  Math.min(255,green*pct/100) );
  blueBright=parseInt(  Math.min(255,blue*pct/100) );

  return({red:redBright,green:greenBright,blue:blueBright});

}
于 2013-10-16T20:51:31.683 に答える
1

markE の回答のオプションとして、アルファ チャネルを直接スケーリングすることができます。

このアプローチは、前処理段階の一部としてのみお勧めします。この方法でバッファを反復処理するのは比較的遅いプロセスであるため、スプライトを使用する必要があるたびに使用することはお勧めしません。

ライブデモはこちら

デモからのスナップショット

すでにキャンバスにスプライトがあり、その位置がわかっていると仮定します。

/// get the image data and cache its pixel buffer and length
var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var length = data.length;
var i = 0;

var scale = 4; /// scale values 4 times. This may be a fractional value

/// scale only alpha channel
for(; i < length; i += 4) {
    data[i + 3] *= scale;
}

context.putImageData(imageData, x, y);

キャンバスが使用している の良い点はUint8ClampedArray、値をクランプして丸めるので、下限または上限をチェックしたり、値を整数に変換したりする必要がありません。内部コードがこれらすべてを行います。

于 2013-10-16T23:54:23.350 に答える