[英]Erasing a png image drawn by a canvas
我正在为ipad开发html5应用程序。 我想在canvas元素中显示一个图像,并在其底下显示一个背景图像。 当用户在画布上的图像上擦手指时,应擦除以显示背景图像。 这是我开始使用的代码。 现在,我只是想画一条透明线来显示背景图像。 我稍后会担心触摸事件。 有任何想法吗?
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'Lord-of-Bones.png';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation = "copy";
ctx.strokeStyle = "rgba(0,0,0,0)";
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
}
这就是最终为我工作的原因。
var imageData = context.getImageData(x,y,50,50);
var data = imageData.data;
for (var i = 0; i < data.length; i+=4) {
data[i] = 0; //red
data[i+1] = 0; //green
data[i+2] = 0; //blue
data[i+3] = 0; //alpha
}
context.putImageData(imageData, x, y);
我认为复合操作应该是复制以外的东西-可能是目的地输出。
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
获得这种工作的另一种方法可能是直接从上下文的ImageData中清除像素数据。
您可以在一个画布上绘制图像,在另一个具有较高z索引的画布上绘制要擦除的蒙版。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.