javascript - 有没有办法检测对混合模式的支持？

Question

我正在尝试查看加载页面的浏览器是否支持混合模式。例如，是否有一个属性我可以检查，以便在 IE 等浏览器中加载时返回 false 或未定义，或者我是否必须通过检查用户正在使用的浏览器来执行此操作。

混合模式与 Canvas 混合模式相同

http://caniuse.com/#feat=canvas-blending

Answer 1

在浏览器中测试特定功能通常涉及测试方法或属性是否为 null。

// Is canvas supported? Test by seeing if HTMLCanvasElement is 'truthy'

var BrowserAllowsCanvas = !!window.HTMLCanvasElement;

但是 Blending 是一个属性分配，而不是一个可以测试为 null 的方法/属性。

要设置混合模式，请将混合模式分配给context.globalCompositeOperation

context.globalCompositeOperation='multiply';

因此，也许最简单的混合测试就是尝试将 context.globalCompositeOperation 设置为有效的混合模式，然后检查该分配是否卡住。

function CanvasAllowsBlending(){
    var hasBlending=false;
    ctx.save();
    ctx.globalCompositeOperation='multiply';
    var hasBlending=(ctx.globalCompositeOperation=='multiply');
    ctx.restore();
    return(hasBlending);
}

[更新:新的混合模式已添加到 Canvas 中 - 导致问题]

正如@Kaiido所说here ，一些新添加的混合模式集(在某些浏览器中)将错误地指示支持，而实际上不支持。因此，在浏览器纠正此错误之前，您可以应用合成，然后进行像素测试，看看它是否真正生效。