Bug Firefox - globalCompositeOperation ne fonctionne pas avec drawImage pour un élément SVG

J'essaie de créer un effet 'effaceur' dans Canvas, mais en utilisant une image SVG comme forme personnalisée pour la gomme. Donc, je peux dessiner mon image SVG sur le canevas, et utiliser globalCompositeOperation = 'destination-out' pour créer un effet de masquage.Bug Firefox - globalCompositeOperation ne fonctionne pas avec drawImage pour un élément SVG

Cela fonctionne très bien dans IE, Safari et Chrome. Mais il échoue complètement dans 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>

Source

2015-11-28 user4166433

bug augmentation dans [bugzilla] (https://bugzilla.mozilla.org) alors –

C'est en effet un bug, et comme conseillé par @RobertLongson, vous devez soulever un bogue dans Mozilla's Buzilla. Mais d'abord, vous devriez nettoyer votre code: ctx.beginPath() est inutile. et ctx.closePath() ne fait pas ce que vous pensez.

Si vous voulez une solution à ce problème, vous pouvez d'abord dessiner l'image svg sur une toile, puis utilisez cette toile comme la gomme:

(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>

Source

2015-11-28 09:35:40 Kaiido

Bug Firefox - globalCompositeOperation ne fonctionne pas avec drawImage pour un élément SVG

Répondre

Questions connexes