PHPとキャンバスのピクセル色の置き換えインターネットの

Question

こんにちは親愛なる人、

私は面白いスクリプトのアイデアを持っているが、私は私が望むものを達成するための最良の方法を見つけようとしています。

アイデアは簡単です。毎回文字のカスタムカラーを実現するために、ピクセルカラーを置き換えます。最終的な結果

：このにそれを回すスクリプトを経由して 元画像を

そして、私は基本的に必要とされています。私はこの男を持って、私はこれらの画像を生成するPHPのキャンバスと、おそらくSVGを使用することになります

1）アルファピクセルのみを持っているとシェーディングを達成する上での背後にあると場所のアルファ画像からそれをカラー：

は、私はそれを行うにはいくつかの方法が考えられと深さ

2）

3）個々のピクセルを描画します（ただし、このオプションは、私が本当にやりたいことではありません）色相/彩度のようないくつかのものを使用しますが、それは私の知識を超えています。

多分私はそれを達成するために何かできることがあります。

ありがとうございます。

Answer 1

2時過ぎですので、ここで簡単な答えです。

ベストオプション：すべてのキャラクターのバリエーションを持つspritesheetを作成し、このようなあなたのspritesheetから目的のスプライトをカット：drawImage(spritesheet, spriteX, spriteY, spriteWidth, spriteHeight, canvasX, canvasY, spriteWidth, spriteHeight)

次の最良の選択肢を：あなたの完全な文字でspritesheetを作成し、複数を持っています交換用のパンツ（ちょうどパンツ - フルキャラクターではない）、交換用シャツ、交換用武器など。最初にフルキャラクターを描き、キャラクターの上に所望のパンツを描く - 元のパンツを所望のパンツで上書きする。

• すると作成：ランタイムrecoloringが必要な場合は、動的にちょうどパンツの切り欠き部の色を変更するために合成を使用

  交換可能なパンツ、シャツ、武器の文字を「ドレッシング」この方法であなたが効果的だ、などメインキャンバスのフルキャラクター

• 2番目のキャンバスでは、パンツだけを作成します。
• `secondContext.globalCompositeOperation = 'source-in'を設定します
• 希望するfillStyleを設定します。
• 全体秒キャンバス上の矩形塗りつぶし：あなたの＃2についてsecondContext.fillRect(0,0,secondCanvas.width,secondCanvas.height)

を：高価なピクセルを操作する - 可能な場合は避けます。

＃3について：単色のRGBカラーを置き換えるだけの場合は、彩度&明度を混乱させる必要はありません。