我试图制作一个'橡皮擦'在画布中效果,但使用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;
答案 0 :(得分:0)
这确实是一个错误,正如@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);
})()
&#13;
<div>
<canvas id="c" width="400" height="400"></canvas>
</div>
&#13;