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元素

回答

相關問題