私が取り組んでいるアプリの HTML5 と Canvas を使用して、PNG 画像のリアルタイムの色の変更を実現しようとしています。私はこれを達成するための 2 つの方法を調査しました。各ピクセルを変更する必要はありません。これは、フレームごとに実行するにはコストがかかりすぎるためです。ただし、どちらの方法も望ましくない結果をもたらします。
方法 1:元の画像を一時的なキャンバスに描画し、コンテキストの globalCompositeOperation を「source-in」に設定してから、目的の色の塗りつぶされた四角形を一時的なキャンバス (画像の上) に描画し、新しく着色したものを返します。メイン プロジェクトで使用するキャンバス/イメージ。このアプローチのソース コードは、stackoverflow.com/questions/16228048/replace-a-specific-color-by-another-in-an-image-sprite-in-a-html5-canvas の回答 #2 にあります。
方法 1 の問題は、ソース イメージのグレースケールまたはより暗いコンポーネントが引き継がれず、アルファ コンポーネントと新しい色だけが引き継がれることです。そのため、色付きの画像を同じ場所に繰り返し描画すると、元の画像にテクスチャ付きのコンポーネントがあり、常に暗い色合いのままであっても、最終的には単色になります。テクスチャのない単一の色のみが必要な画像に最適です。
方法 2:元の画像を RGB と黒/透明のコンポーネントに分離し、それぞれ別の画像として保存します。次に、「明るくする」モードを使用して、各コンポーネントを互いの上に描画します。これについては、www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/ のコード スニペットで詳細に説明されています。
方法 2 の問題は、半透明のピクセルが明るく透明なままではなく、暗くなってしまうことです。方法 2 のアプローチは、Cocos2dx HTML などの一部のエンジンで使用されているようですが、自分で試してみると、常に透明ピクセルが暗くなります。
テストに使用したサンプル画像は次のとおりです: http://i.imgur.com/esAt9Au.png
これは、メソッドと私の意図した結果の図です。http://i.stack.imgur.com/MWP8h.png
