タグ:Canvas:記事一覧
htmlのCanvas要素をJavaScrptで動的に追加すると、うまく表示してくれないことがあります。その原因の一つが、タグ上とcss上のサイズ指定の動作が異なるという点です。理解すれば単純なことですが、理解せずにCanvasを使用するとハマります。
Canvas APIは画像描画時に globalCompositeOperationを使用すると、元からある画像との合成方法を指定することができます。ここでは、globalCompositeOperationに指定できる値と結果を一覧にしてお伝えします。
JavaScriptのCanvas APIでグラデーションの塗りつぶしができますが、少しクセがあります。大いに悩む点なので、まとめてみました。
Canvasでアニメーションをおこなう場合、全体をクリアしてから再描画する必要があります。しかし描画内容が複雑だと処理が重くなり、滑らかな表現が難しくなります。改善策として、動かない図形とアニメーションをさせる図形のレイヤーを分けることで、処理を軽くする方法をお伝えします。