2

multiplyHTML キャンバスに描画するときは、ブレンド モードを使用する必要があります。

ctx.globalCompositeOperation = "multiply";
ctx.drawImage(...);

最新の Chrome/Firefox では期待どおりの結果が得られますが、IE 11 では得られません。クラッシュはしませんが、globalCompositeOperationプロパティを指定しない場合と同じ結果が得られます。

multiplyブラウザーがブレンディング モードをサポートしているかどうかをプログラムでテストするにはどうすればよいですか?

4

2 に答える 2

3

コンテキストに対する多くの操作と同じように、globalCompositeOperation への間違った入力は単に無視されるため、特定のモードがサポートされているかどうかを確認するのは非常に簡単です。設定するだけで、現在のモードを読み取って、指定したモードであることを確認できます。
明確にするために、次のような関数を使用できます。 

// setCompositeMode : sets the globalCompositeOperation on provided context.
// return true if mode is supported, false otherwise.
function setCompositeMode(ctx, newMode) {
    ctx.globalCompositeOperation = newMode;
    return ( ctx.globalCompositeOperation == newMode ) ;
}

ちょっとした例： 

var cv=document.createElement('canvas');
var ctx= cv.getContext('2d');

console.log(" Current (default) composite mode : " + ctx.globalCompositeOperation ) ;
console.log("setting 'destination-in'.");
ctx.globalCompositeOperation = 'destination-in';
console.log(" composite mode : " + ctx.globalCompositeOperation ) ;
console.log("setting 'multiply'.");
ctx.globalCompositeOperation = 'multiply';
console.log(" composite mode : " + ctx.globalCompositeOperation ) ;
console.log("setting 'i-don-t-exist' .");
ctx.globalCompositeOperation = 'i-don-t-exist';
console.log(" composite mode : " + ctx.globalCompositeOperation ) ;

出力 (Chrome/Mac OS 上、乗算をサポート):

" Current (default) composite mode : source-over"
"setting 'destination-in'."
" composite mode : destination-in"
"setting 'multiply'."
" composite mode : multiply"
"setting 'i-don-t-exist' ."
" composite mode : multiply"
于 2014-09-30T17:24:10.130 に答える
2

コンテキスト API は複合モードを内部ブラウ​​ザー プロパティとして実装しているため、おそらく実際に実行.globalCompositeOperation='multiply'して、結果が有効かどうかを確認する必要があります。

// pre-flight compatibility tests
ctx.fillStyle='black';
ctx.fillRect(0,0,1,1);
ctx.globalCompositeOperation='multiply';
ctx.fillStyle='white';
ctx.fillRect(0,0,1,1);
var supportsMultiplyCompositing=(ctx.getImageData(0,0,1,1).data[0]===0);
于 2014-09-30T15:29:20.853 に答える