0

ゲーム エンジン用のパーティクル アニメーションに取り組んでいます。イメージの形状を維持しながら、キャンバスの ImageElement オブジェクトの色相、ガンマ、およびその他のイメージ プロパティを変更できるかどうかを知りたいです。

私がこれまでに試したことは次のとおりです。

_ctx.save();
_ctx.setStrokeColorHsl(240, 100, 50);
_ctx.fillRect(c.x, c.y, width, height);
_ctx.globalAlpha = nAlpha; //Modify the transparency
_ctx.drawImageScaled(p, c.x, c.y, width, height);
_ctx.restore();

これは機能しますが、画像全体にトーンを適用しています。つまり、画像が透明なエッジを持つ PNG の場合、「fillRect()」(長方形のみをペイントする) を使用して透明な部分もペイントします。変換と画像オブジェクトを適用します。

結果は次のようになります: (赤い粒子は半透明の円です)

たき火の試み

画像の形状のみに色を付けたり、オブジェクトを直接変更して、画像の表示部分にのみ変換が適用されるようにする他の方法はありますか?

4

2 に答える 2

1

globalCompositeOperation モードを使用する必要があります。おそらく最初に画像を描画し、次にglobalAlphaとglobalCompositeOperation = 'source-atop'でfillRectを描画します。

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

ライターを使用して画像を明るくしたり色付けしたり、目的地を超えて背景を追加したりして、これらのモードをいじることができます。
ただし、すべてのブラウザで一部のモードが機能しないことに注意してください。数か月前に暗いテストを行いましたが、それまでには機能しませんでした。

于 2013-10-29T20:40:32.613 に答える