擦除画布绘制的png图像
Erasing a png image drawn by a canvas
我正在为ipad开发html5应用程序。我想在画布元素中显示一个图像,下面有一个背景图像。当用户在画布上的图像上擦拭手指时,它应该擦除以显示背景图像。这是我开始的代码。现在我只是想画一条透明的线来显示背景图像。我稍后再考虑触摸事件。什么好主意吗?
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-index的画布上绘制要擦除的遮罩。
相关文章:
- 将SVG下载为PNG图像
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- 将画布下载为PNG图像
- 在 JavaScript 中将一个.PNG图像拖放到另一个图像上
- 将普通的 PNG 图像转换为 JSON 数据,然后存储到对象
- 使用AJAX从PHP获取PNG图像
- 如何使用纯javascript或jQuery将HTML5画布屏幕作为png图像保存到项目的特定文件夹中
- 带有png图像的3D动画
- 如何从 base64 数据 URI 在服务器端保存 PNG 图像
- PNG 图像更改颜色
- 使用网络工作者和画布合并 png 图像
- 将 png 图像从 JavaScript 传递到 PHP(错误:请求 URI 太大)
- 如何将画布另存为 PNG 图像
- 如何使 png 图像充当按钮
- 如何将.png图像放入头部标题中
- 使用 FabricJS 将图案添加到 png 图像(在画布中)
- 将用Javascript绘制的外部SVG文件导出为PNG图像
- 通过画布从 svg 或 svg 输出 300 张具有正确文件名的 png 图像
- 使用 JavaScript 绘制到 HTML5 画布时调整.png图像的大小
- Html代码到Png图像