測試，如果瀏覽器支持「乘」爲globalCompositeOperation帆布財產

Question

我需要使用multiply混合模式在HTML畫布上繪製時：

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

我得到預期的結果在最新的Chrome/Firefox的但不是在IE 11：它不會崩潰，但我得到的結果與未指定globalCompositeOperation屬性時相同。

如何以編程方式測試瀏覽器是否支持multiply混合模式？

Answer 1

正如許多操作，錯誤對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" 

Answer 2

由於上下文API impliments複合模式爲內部瀏覽器的屬性，你可能有實際執行.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);