8

これが他の場所で尋ねられた場合は申し訳ありませんが、そのままでは言い表すのが非常に難しいため、何も見つかりませんでした.

キャンバスにマスクを実装する方法はありますか?

たとえば、図形のみを使用して (画像なし)、窓のある家を描きます。人を表す形も持っています。私はその人が窓に現れることを望んでいます - しかし明らかに、窓が許す限り、その人は見えるべきです。残りはマスクされます。

家の窓が占める部分を空にすることを考えました。これにより、レイヤーに本物の穴ができ、問題を簡単に解決できます。

ただし、キャンバス内の形状または形状の一部を削除することはできず、古いものの上に新しいものを描くことしかできないことは承知しています。では、多層環境 (Kinetic.JS でゲームを作成しています) では、正確に何ができるでしょうか?

これの説明が不十分である場合は申し訳ありません-グラフィック全体にとって新しいものです。

4

2 に答える 2

28

クリッピングと合成についてはすぐに学習する必要がありますが、どちらも実際に必要なものではありません。

代わりに、HTML5 canvas が使用する、ゼロ以外の巻き数ルールを使用してパスを作成する方法を学ぶ必要があります。

パスの一部を時計回りに、別の部分を反時計回りに描くと、パスから図形を「切り取る」ことができます。

ウィンドウの例を次に示します。

http://jsfiddle.net/simonsarris/U5bXf/

編集：これは、ゼロ以外の巻き数規則がどのように機能するかを少し視覚化したものです。

ここに画像の説明を入力

サブパスは方向に描かれ、パスが交差する場所では、スペースが埋められます (または埋められません)。

図の任意の部分に指を置いて、指から空のスペースに出る線を想像すると、その線はパスを何度も横切ります。ゼロから開始し、時計回りのパスごとに 1 を加算し、反時計回りのパスごとに 1 を減算すると、塗りつぶされた領域はゼロ以外の数値を持つすべての領域になります。エリアの番号は上の図に示されています。

于 2012-08-18T20:44:21.233 に答える
1

クリッピング パスを作成し、そこに図形を描画するだけです。Mozilla Developer Network は、canvas を学習するための出発点として最適です。クリッピングに関するセクションは次のとおりです。

あなたが作成しようとしていると思われるものの例を使用して、基本的なフィドルを作成しました。

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);

// create a clipping path
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 130);
ctx.lineTo(130, 130);
ctx.lineTo(130, 20);
ctx.clip();

// backgroud in clipped area
ctx.fillStyle = "#11c";
ctx.fillRect(0, 0, 150, 150);

// draw shapes inside clipped area
ctx.translate(75, 90);

ctx.fillStyle = '#f00';

ctx.fillRect(-15, -40, 40, 40);
ctx.fillRect(0, 0, 10, 10);
ctx.fillRect(-25, 10, 60, 60);

これがお役に立てば幸いです。あなたのプロジェクトで頑張ってください!

于 2012-08-18T19:40:02.783 に答える