Html 使用clearRect擦除使用drawImage绘制到画布上的png图像的一部分

是否可以使用clearRect删除使用drawImage绘制到画布上的png图像的一部分

我正在尝试这样的东西，但它不起作用：

<canvas id="canvas"></canvas>
<img id="pngimg" src="" alt="" />

[...]

canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");

[...]

pngimg.src = canvas.toDataURL();
context.drawImage(pngimg, 0, 0, canvas.width, canvas.height);

[...]

[...]
canvas=document.getElementById（“canvas”）；
pngimg=document.getElementById（“pngimg”）；
[...]
pngimg.src=canvas.toDataURL（）；
drawImage（pngimg，0，0，canvas.width，canvas.height）；
[...]

---

然后使用clearRect用鼠标擦除。擦除操作适用于使用drawLine添加到画布的笔划，但不适用于使用drawImage的图像。它必须是clearRect，而不是绘制纯色，因为背景不是纯色。可以这样做吗？

从哪里加载图像

如果画布上的图像来自不同的域，则不能使用

canvas.toDataURL（）

。请看这里：

在同一领域的情况下，这应该有效：

Original Image: <img id="pngimg" src="http://www.domain.com/image.png" /><br/>

Canvas With Clear:
<canvas width="160" height="80" id="canvas"></canvas><br/>

Altered Image:
<img id="newImg" src="" />

---

由于您尚未共享完整的代码，我不确定，但从描述中我怀疑这是否与我今天早些时候遇到的问题相同。请访问此线程

---

我发现我只是有一个打字错误，现在就可以将图像绘制到画布上并擦除。谢谢你的回复，但我不知道关于图片托管在不同的域。我的图像位于同一个域中，并从画布内容动态生成。

canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");
newImg = document.getElementById("newImg");

var context = canvas.getContext("2d");
context.drawImage(pngimg, 0, 0, canvas.width, canvas.height);
context.clearRect(125,0,35,25);

newImg.src = canvas.toDataURL("image/png");