私はキャンバスに白黒画像が最初に表示されている小さな子供用の色付けゲームを作成しています。キャンバス上で描画ツール（マウス）を動かすと、白と黒の表面は、対応するカラー画像からの色情報で上書きされます。HTML5キャンバスにのみ透明でないピクセルをコピーする
特にマウスを動かすたびに、円形の領域をカラー画像からキャンバスにコピーする必要があります。円のエッジは、実際の描画ツールの品質をよりよく模倣するために少しぼやけているはずです。
質問はこれを達成する方法ですか？
私が見る方法の1つは、クリッピング領域を使用することですが、この方法ではエッジがぼやけることはありません。それとも？
アルファマスクを使用して、マスク内のゼロアルファを持つピクセルに対応するピクセルのみをコピーすることを考えていました。実現可能ですか？
私の提案は、あなたが描いてみたいカラー画像の前に描画可能なキャンバスを置くことです。 （カラー画像をキャンバスの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();
不透明な色から完全に透明な放射状のグラデーションを使用することを検討しましたか？
ここは、Mozillaのデモです。サークルは必要な方法で描かれています。 - https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html
おそらく、あなたは後になるエフェクトを模倣するために、さまざまなアルファ（それぞれ1つのダブ）で複数のクリッピング領域を使用します。低不透明度を最初にレンダリングし（drawImageを使用してペースト）、残りの部分をアルファ= 1.0に達するまでレンダリングします。
感謝。アルファグラデーションはActionScriptでのやり方ですから、私はそれについて考えました。画像からキャンバスへのコピーにグラデーションを使用する方法はわかりません。 – akonsu
ああ、あなたの質問は間違っています。ごめんなさい。私はあなたがイメージでそれをすることができるとは思わない。私が考えることができる唯一の方法は、円形領域を1つのキャンバスにレンダリングし、 'xor'合成モードで白から黒の放射状グラデーションを描画することです。それをメインキャンバスにコピーします。おそらくこの方法では不可能かもしれませんが、あなたはそのアイデアを得ることができます。 –