html - 测试浏览器是否支持 globalCompositeOperation Canvas 属性的 "multiply"

Question

在 HTML Canvas 上绘图时，我需要使用 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"