0

HTML5のキャンバスとクリッピングをいじっています。ユーザーにキャンバスをクリックしてもらい、円をクリップさせてから繰り返すにはどうすればよいのでしょうか。したがって、基本的に、ユーザーは複数回クリックすることができ、複数のクリップがあります。

私が望むものと少し似ているいくつかの解決策を試しましたが、それは機能していません。

クリッピングコードは次のとおりです。

context.save();

context.beginPath();
context.arc(mouseX,mouseY,50,50,Math.PI*2,true);
context.globalCompositeOperation = 'destination-out';
context.clip();
context.closePath(); 
var img = new Image();
img.src = canvasSnowflake.toDataURL();

context.drawImage(canvasSnowflake, 0, 0);

context.restore();

ここで実際の動作全体を見ることができます：http：//jsfiddle.net/cnbishop/8FzuB/。現在、一度クリックするとクリップは機能しますが、キャンバスをもう一度クリックすると新しいクリップを取得できます。これも可能ですか？

4

1 に答える 1

0

ユーザーがクリップするたびに、このアクションをJSに保存する必要があります。次にユーザーがクリックしたときに、過去のクリッピングを取得して適用し、新しいクリップアクションを適用します。

基本的に、Canvasは以前のレンダリングを「記憶」できないため、履歴内のすべてのクリッピングアクションを実行されたのと同じ順序で再適用する必要があります。

私はあなたの質問を正しく解釈しましたか？

于 2011-10-26T16:19:29.970 に答える