如何使用globalCompositeOperation

Question

因此，根據this article，您可以使用配備帆布混合模式測試，功能測試帆布混合模式：

Modernizr.addTest('canvasblending', function() { 
    if (Modernizr.canvas === false) return false; 
    var ctx = document.createElement('canvas').getContext('2d'); 
    ctx.globalCompositeOperation = 'screen'; 
    return ctx.globalCompositeOperation == 'screen'; 
}); 

它返回一個假陽性在Chrome 27

Answer 1

我寫了一些可以工作的東西，但它非常難看，但認爲它可以幫助別人，或者我們可以得到更好的東西。這是我想出的：

Modernizr.addTest('canvasblending', function() { 
    if (! Modernizr.canvas) return false; 
    var canvas = document.createElement('canvas'); 
    canvas.width = 1; 
    canvas.height = 1; 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = '#000'; 
    ctx.fillRect(0,0,1,1); 
    ctx.globalCompositeOperation = 'multiply'; 
    ctx.fillStyle = '#fff'; 
    ctx.fillRect(0,0,1,1); 
    return ctx.getImageData(0,0,1,1).data[0] === 0; 
});