Firefox bug - globalCompositeOperation不能使用drawImage作为SVG元素

我想在Canvas中创建'橡皮擦'效果，但是使用SVG图像作为橡皮擦的自定义形状。Firefox bug - globalCompositeOperation不能使用drawImage作为SVG元素

因此，我可以将我的SVG图像绘制到画布上，并使用globalCompositeOperation ='destination-out'创建遮罩效果。

它在IE，Safari和Chrome中很好用。但它在Firefox中完全失败。

\t \t function init() { 
 
\t \t \t var canvas = document.getElementById('c'); 
 
\t \t \t var ctx = canvas.getContext('2d'); 
 

 
\t \t \t var img = document.createElement('IMG'); 
 

 
\t \t \t img.onload = function() { 
 
\t \t \t  ctx.beginPath(); 
 
\t \t \t  ctx.drawImage(img, 0, 0); 
 
\t \t \t  ctx.closePath();  
 
\t \t \t  ctx.globalCompositeOperation = 'destination-out';  
 
\t \t \t } 
 

 
\t \t \t img.src = "http://www.evanburke.com/FROST.png"; 
 
\t \t \t var svg = new Image; 
 
\t \t \t svg.src = "http://www.evanburke.com/luf.svg"; 
 
\t \t \t 
 
\t \t \t function drawPoint(pointX,pointY){ 
 
\t \t \t  ctx.drawImage(svg,pointX,pointY); \t \t 
 
\t \t \t } \t \t \t 
 
\t \t \t canvas.addEventListener('mousemove',function(e){ 
 
\t \t \t \t drawPoint(e.clientX,e.clientY); 
 
\t \t \t },false); \t \t \t 
 
\t \t }

\t <body onload="javascript:init();"> 
 
\t <div> \t  
 
\t  <canvas id="c" width="400" height="400"></canvas> 
 
\t </div> 
 
\t </body>

来源

2015-11-28 user4166433

加薪的bug [Bugzilla的] （https://bugzilla.mozilla.org） –

这的确是一个错误，并通过@RobertLongson作为建议，你应该在Mozilla's Buzilla提高的错误。但是首先，你应该清理你的代码：ctx.beginPath()是没用的。和ctx.closePath()不会做你认为它的事情。

如果你想为这个问题的解决方法，你可以先画出SVG图像到画布上，然后使用这个画布橡皮擦：

(function init() { 
 
    var canvas = document.getElementById('c'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var svgCan; 
 
    var img = document.createElement('IMG'); 
 

 
    img.onload = function() { 
 
    ctx.drawImage(this, 0, 0); 
 
    ctx.globalCompositeOperation = 'destination-out'; 
 
    } 
 

 
    img.src = "http://www.evanburke.com/FROST.png"; 
 
    var svg = new Image(); 
 
    svg.src = "http://www.evanburke.com/luf.svg"; 
 
    svg.onload = function() { 
 
    // create a canvas 
 
    svgCan = canvas.cloneNode(); 
 
    svgCan.width = this.width; 
 
    svgCan.height = this.height; 
 
    // draw the svg on this new canvas 
 
    svgCan.getContext('2d').drawImage(svg, 0, 0); 
 
    } 
 

 
    function drawPoint(pointX, pointY) { 
 
    // this is now a pixel image that will work with gCO 
 
    ctx.drawImage(svgCan, pointX, pointY); 
 
    } 
 
    canvas.addEventListener('mousemove', function(e) { 
 
    drawPoint(e.clientX, e.clientY); 
 
    }, false); 
 
})()

<div> 
 
    <canvas id="c" width="400" height="400"></canvas> 
 
</div>

来源

2015-11-28 09:35:40 Kaiido

Firefox bug - globalCompositeOperation不能使用drawImage作为SVG元素

回答

相关问题