透明度を利用したアニメーション
- 2023/07/31
- 22:58
JavaScriptのCnvas上アニメーションはclearRectメソッドを利用して描写をリセットして断続的なアニメーション描写を行うことができますが、Canvasの背景色と同じ色と同じサイズのfillRectメソッドを用いることで同じような描写ができます。
ここでfillRectメソッドを用いる利点はfillRectメソッドの描写をアニメーションの表現に利用できることです。
通常fillRectメソッドは塗りつぶした矩形を描写するメソッドですが、そこに塗りつぶす色に透明度のプロパティを加えると描写毎に半透明の矩形を重ねて描写することになります。
この矩形をCanvas全体に描写毎に重ねることで以前の描写が半透明の矩形越しに透けて見えるようになります。
これを利用して背景の色が変わる描写や軌跡の残る描写をを行うことができます。
ここでfillRectメソッドを用いる利点はfillRectメソッドの描写をアニメーションの表現に利用できることです。
半透明の矩形を重ねる描写
通常fillRectメソッドは塗りつぶした矩形を描写するメソッドですが、そこに塗りつぶす色に透明度のプロパティを加えると描写毎に半透明の矩形を重ねて描写することになります。
この矩形をCanvas全体に描写毎に重ねることで以前の描写が半透明の矩形越しに透けて見えるようになります。
これを利用して背景の色が変わる描写や軌跡の残る描写をを行うことができます。
スポンサーサイト