0

Canvas で「消しゴム」効果を作成しようとしていますが、消しゴムのカスタム形状として 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>

4

1 に答える 1

0

これは確かにバグであり、@RobertLongson のアドバイスに従って、Mozilla の 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-28T09:35:40.793 に答える