0

私は小さな子供向けのぬりえゲームを書いています。最初にキャンバスに白黒の画像が表示され、ユーザーがキャンバス上で描画ツール (マウス) を動かすと、白黒の表面が塗りつぶされます。対応するカラー画像からのカラー情報。

特に、マウスを動かすたびに、色付きの画像からキャンバスに円形の領域をコピーする必要があります。実際の描画ツールの品質をよりよく模倣するために、円の端は少しぼやけている必要があります。

問題は、これをどのように達成するかです。

私が見る 1 つの方法は、クリッピング領域を使用することですが、この方法ではエッジがぼやけません。それともそうですか？

そのため、アルファマスクを使用してそれを行い、ゼロ以外のアルファを持つマスク内のピクセルに対応するピクセルのみをコピーすることを考えていました。それは実現可能ですか？

4

3 に答える 3

2

私の提案は、描画可能なキャンバスを、表示したい色付きの画像の前に置くことです。(色付きの画像をキャンバスの CSS 背景画像として使用できます。)

最初に、不透明度 100% の白黒画像を含むキャンバスを用意します。次に、描画するときに、実際にキャンバスの内容を消去して、背後の画像を表示します。

このような：

var pos_x, pos_y, circle_radius;  // initialise these appropriately

context.globalCompositeOperation = 'destination-out';
context.fillStyle = "rgba(0,0,0, 1.0)";

// And "draw" a circle (actually erase it to reveal the background image)
context.beginPath();
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2);
context.fill();
于 2012-02-10T15:15:37.267 に答える
1

おそらく、さまざまなアルファ (それぞれに 1 つの塗りつぶし) を使用して複数のクリッピング領域を使用して、目的の効果を模倣します。最初に不透明度の低いものをレンダリングし (drawImage を使用して貼り付けます)、その後、alpha=1.0 に達するまで残りをレンダリングします。

于 2012-02-10T11:18:43.377 に答える