1

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);

[...]

次に、clearRectを使用してマウスで消去します。消去は、drawLineを使用してキャンバスに追加されたストロークでは機能しますが、drawImageを使用した画像では機能しません。背景が単色ではないため、単色を描画するのではなく、clearRectにする必要があります。これを行うことは可能ですか？

4

2 に答える 2

0

完全なコードを共有していないため、よくわかりませんが、説明から、今日遭遇した同じ問題であるとは思えません。このスレッドにアクセスしてください。

キャンバス上で、png を使用した drawImage とストロークを使用して描画を作成することの違いは?

于 2011-12-22T17:09:10.960 に答える
0

画像はどこから読み込んでいますか？

canvas.toDataURL()キャンバス上の画像が別のドメインからのものである場合は使用できません。ここを参照してください: 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");
于 2011-07-21T07:23:30.453 に答える