在 HTML 画布上绘图时，我需要使用 multiply 混合模式：
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(...);
我在最新的 Chrome/Firefox 中得到了预期的结果，但在 IE 11 中没有：它不会崩溃，但我得到的结果与未指定 globalCompositeOperation 属性时的结果相同。
如何以编程方式测试浏览器是否支持multiply 混合模式？
【问题讨论】：
标签： html canvas html5-canvas globalcompositeoperation
与上下文中的许多操作一样，对 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"
【讨论】：
由于上下文 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);
【讨论】：