测试浏览器是否支持globalCompositeOperation画布属性的“乘”
测试浏览器是否支持globalCompositeOperation画布属性的“乘”
提问于 2014-09-30 14:40:41
在HTML上绘图时，我需要使用multiply混合模式：
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(...);我在最新的Chrome/Firefox中得到了预期的结果，但在IE11中没有得到预期的结果:它不会崩溃，但我得到的结果与未指定globalCompositeOperation属性时的结果相同。
如何编程测试浏览器是否支持multiply混合模式？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-30 17:24:10
与上下文上的许多操作一样，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"Stack Overflow用户
发布于 2014-09-30 15:29:20
由于context 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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26123588
复制相关文章
相似问题
腾讯云开发者
