Canvas APIについて
はじめに
12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。
この連載では、Web標準とDDDについて学びを深めていきます。
第25回は「Canvas API」がテーマです。
Canvas APIとは何か、どのように実装するのかを紹介します。
Canvas APIとは
Canvas APIはJavaScriptと<canvas>よってグラフィックを描く方法を提供しています。
アニメーションや、ゲームのグラフィック、データの可視化などに使用することが出来ます。
Canvas APIは2Dグラフィックを対象としているため、3Dグラフィックを扱いたい場合はWebGL APIを使いましょう。
下記のように、document.getElementByIdでcanvas要素を取得し、HTMLCanvasElement.getContext()で要素のコンテキスト要素を取得します。
fillStyleプロパティで色を選択できたり、fillRect()メソッドで図形の位置や大きさを指定できたりします。
@codepen
Canvas APIの実装例
クリスマス🎄なのでサンタを描いてみました。
まとめ
今回はCanvas APIについて紹介しました。
描画の自由度が高いので、色々な表現が出来ると思います。
そして、本日で25日間の1人アドカレ終了しました！
このアドカレを通して得た学びを活かし、来年はさらに成長していきたいと思います！