测试，如果浏览器支持“乘”为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);