Question

在HTML画布上绘图时，我需要使用multiply混合模式：

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

测试浏览器是否支持globalCompositeOperation canvas属性的“multiply”

2 个答案: