Firefox错误 - globalCompositeOperation不使用drawImage作为SVG元素

时间:2015-11-28 05:46:08

标签: html5 firefox canvas svg globalcompositeoperation

我试图制作一个'橡皮擦'在画布中效果,但使用SVG图像作为橡皮擦的自定义形状。

所以我可以将我的SVG图像绘制到画布上,并使用globalCompositeOperation =' destination-out'创造掩蔽效果。

它在IE,Safari和Chrome中运行良好。但它在Firefox中彻底失败了。



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

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

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

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

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

1 个答案:

答案 0 :(得分:0)

这确实是一个错误,正如@RobertLongson所建议的那样,你应该在Mozilla's Buzilla中提出一个错误。
但首先,您应该清理代码:ctx.beginPath()没用。并且ctx.closePath()并没有做你认为它做的事情。

如果您想要解决此问题,可以先将svg图像绘制到画布上,然后将此画布用作橡皮擦:

&#13;
&#13;
(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);
})()
&#13;
<div>
  <canvas id="c" width="400" height="400"></canvas>
</div>
&#13;
&#13;
&#13;