Javascript 使用html5中的触摸事件擦除画布上图像的特定部分_Javascript_Html_Canvas

Javascript 使用html5中的触摸事件擦除画布上图像的特定部分

javascript html canvas

Javascript 使用html5中的触摸事件擦除画布上图像的特定部分,javascript,html,canvas,Javascript,Html,Canvas,我正在开发一个应用程序我在HTML5画布上上传了一个图像我需要修剪此图像的某些区域在canvas.addlistener touchevents中，作为画笔工具绘制白色弧。这样就实现了白色背景 function drawDot(ctx,x1,y1){ ctx.fillStyle="#ffffff"; ctx.globalCompositeOperation = 'destination-atop'; ctx.beginPath(); ctx.arc(x1,y

我正在开发一个应用程序

我在HTML5画布上上传了一个图像

我需要修剪此图像的某些区域

在canvas.addlistener touchevents中，作为画笔工具绘制白色弧。这样就实现了白色背景

function drawDot(ctx,x1,y1){
    ctx.fillStyle="#ffffff";
    ctx.globalCompositeOperation = 'destination-atop';
    ctx.beginPath();
    ctx.arc(x1,y1,15,0,Math.PI*2);
    ctx.fill();
 }

我尝试了上面的代码，但没有工作。。。使用线条工具和所有合成操作模式

是否对图像类型（如透明图像）有任何限制

Pl help

你能用一段提琴来举一个例子，让我们看看出了什么问题吗？它是否与默认值

globalCompositeOperation

一起工作？请制作一个JSFIDLE。我的应用程序详细信息：我正在设置我的花园1。在画布A 2中上载我的草坪图像。使用jCrop裁剪草坪图像的特定部分，（获取裁剪区域-裁剪宽度，裁剪高度）3.将植物图像（此大小的宽度和高度与裁剪宽度和裁剪高度）上载到画布B 4，并覆盖在画布C中，我将画布B img放在画布A img ctx.putImageData（imgData1,0,0）-画布A img ctx.putImageData（imgData2，x，y）-画布B img我在下一篇评论中的其余步骤5：虽然x，y几乎可以，但我尝试通过在imgData1上移动imgData2来完美定位它。通过touchevent 6：保存画布C并将img保存为imgData3 7将imgData3放在新画布D上（我现在看到的图像是草坪，上面有一些植物图像）8：在画布D中，使用imgdata3上的touchevents擦除某些部分步骤8不起作用。我不能在一页上使用addlistener进行两张画布吗？我试过堆肥，弧线，线条，但似乎没有任何效果。我上传了一些随机的jpg gif文件。你能在一段提琴中举一个例子，让我们看看哪里出了问题吗？它是否与默认值

globalCompositeOperation