Question

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

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

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

＆＃13;

		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);			
		}

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃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;

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

1 个答案: