javascript - 複数の画像とオーバーラップを描画するhtml5キャンバス

Question

キャンバスに複数の画像を描画しますが、ユーザーが画像の重なりを定義できるようにしたいと考えています。つまり、ユーザーは、前面に表示される画像と背面に表示される画像を選択します。どうすればそれを達成できますか？

Answer 1

ランダリング チャートの div を作成するときは、「min-height」と「min-width」を使用します。

Answer 2

次の画像を、すでにレンダリングされた画像の「前」または「後ろ」のキャンバスにレンダリングすることだけを気にしていると仮定すると、これを達成できます（つまり、既にレンダリングされた2つの画像の「間」で画像を事後的にレンダリングしないでください）キャンバスにレンダリングされます) globalCompositeOperation2D キャンバス コンテキストのプロパティを使用します。MDN には、実例と包括的なドキュメントがあります。基本的に、次の画像を「上」にレンダリングする場合は"source-over"、このプロパティの値として使用し、既存のコンテンツの背後にレンダリングする場合は を使用します"destination-over"。

2 つ以上の画像のオーバーラップをより詳細に制御する必要がある場合は、これまでのコメントで提案されているようにレンダリングされる順序を調整する必要があります (つまり、画像を配列に配置し、配列を目的の方法で並べ替えます)。 、そしてそれらをレンダリングします)。

Answer 3

一番上の画像は、常に最後に描画された画像です。

画像が選択されているときに画像を前面に表示するときに使用する解決策は、すべての画像を配列に格納することです-これは描画順序にもなります-そして、一番上にある画像は単に配列から取り出されて配置されます最後に、したがって上にあります。