1

本質的にスターバースト効果のある画像があります。スターバーストの色は白で、背景は透明です（PNG w / Alpha）。これらのスターバーストをHTML5キャンバスのランダムな場所にランダムに生成すると同時に、ランダムな色相、彩度、明度（HSL）の値を生成します。これが物事を単純化する場合、これらはRGB値である可能性があります。

目標は、ランダムに生成されたHLS値に基づいて、PNGをキャンバスにレンダリングする前に、HTML5キャンバスに表示するためにPNGの色を変更することです。

StackOverflowや他のサイトで他の投稿をいくつか読んだことがありますが、私が見た唯一の解決策は、キャンバスにレンダリングし、画像が表示されている場所の座標を取得し、ピクセルごとに色を変更することです。 。理論的にはこれでうまくいく可能性がありますが、一部の画像がわずかに重なる場合があります。また、背景がすでに存在する場合、私が理解していることから、背景の色も変更されますが、これも私にとってはあまり解決策ではありません。

これがCanvasの機能の範囲外である場合、フォールバックとして、GD2またはImagickを使用してPHPを介して、またはGimp、ImageMagick、またはその他のコマンドラインを介して画像を動的に再色付けしても問題ないと思います。画像ライブラリ...

どうもありがとう！

- 結果 -

オフスクリーンキャンバスレンダリングの最初の提案をしてくれた@jing3142と、私が見逃していた重要な部分を提供してくれた@Jarrodに特に感謝します。globalCompositeOperation = "source-in"

コンセプトの実用的な実装は次のとおりです。http：//jsfiddle.net/fwtW2/2/

で動作します：

  • クロム
  • Firefox
  • IE 9（他のバージョンはテストしていません）
4

3 に答える 3

2

画像のサイズの2番目のキャンバスはどうですか、そのキャンバスに画像を配置し、必要に応じて色を変更し、再色付けされた画像を抽出してメインキャンバスにランダムに配置し、新しいHSL値を使用して2番目のキャンバスに画像を再色付けします、抽出してメインキャンバスにランダムに配置し、繰り返しますか？

これも役立つ場合がありますhttps://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

于 2013-03-11T18:41:55.013 に答える
1

キャンバスにレンダリングする直前にスターバーストの色を簡単に変更する方法は次のとおりです

starburst.pngをベクターパスに変換してください！（今回はGimp / Illustratorをドラッグする必要がありますが、それだけの価値はあります！）

スターバーストパスには塗りつぶしを含めることができ、塗りつぶしは単色またはグラデーションにすることができます。必要に応じて、派手でランダムに色を変更できます。

スターバーストパスは、.pngのようなラスターイメージのピクシレーションなしで拡大縮小できます。

スターバーストパスは回転してバーストの多様性を示したり、スキューして3Dモーションを表現したりすることもできます。

ファンシーになりたい場合は、シャドウとブラーを使用して「光る」バーストを作成することもできます。

スターバーストパスは、.png画像よりもレンダリングが高速です。特に、描画する前に各.pngを操作する必要がある場合はそうです。

于 2013-03-11T20:05:31.607 に答える
1

私はあなたがただ操作を使うことができるとかなり確信していますsource-in globalCompositeOperationか？ベクター画像ですべてのハードコアとクレイジーを取得する必要はありません。

このコードは魔法が起こる場所です：

var color = 'red';
ctx.fillStyle = color;
ctx.globalCompositeOperation = "source-in";

しかし、これをオフスクリーンキャンバスに再描画する必要があります：あなたはそのようにそれを行うことができます

createBuffer = function(sizeW, sizeH)
{
    buffer = document.createElement('buffer');
    bufferCtx = buffer.getContext('2d');

    buffer.width = sizeW;
    buffer.height = sizeH;

}

次に、画像をオフスクリーンキャンバスに描画し、グローバルコンポジションを適用します。

于 2013-03-12T20:33:02.487 に答える