Question

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

在画布混合模式中混合模式

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

Answer 1

在浏览器中测试指定的能力通常涉及测试方法或属性是否为空。

// 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);
}

[更新：在画布中添加了新的混合模式 - 导致出现问题]

正如@Kaiido所说here，一些新添加的混合模式（在某些浏览器中）会在没有支持的情况下错误地表示支持。因此，在浏览器更正此错误之前，您可以应用合成然后像素测试来查看它是否真正生效。

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

1 个答案: