html - 测试浏览器是否支持 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 操作系统上，支持乘法）：

" 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 将复合模式作为内部浏览器属性，您可能必须实际执行.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);