目次
本記事はCanvasでパーティクルアニメーションを自作する連載の第一回の内容となっています。
これからCanvasの勉強を始める方に向けた内容です。本連載を通して下記のパーティクルアニメーションを作成していきます。
See the Pen Particles Animation | HTML5+Canvas by ryohei (@intotheprogram) on CodePen.
本連載は下記のような順番で進めていきます。本記事は下記リストの①の内容となります。
- ①基本的な使い方
- ②図形を描画する
- ③図形を動かす
- ④指定数の図形をランダムな座標に描画する
- ⑤ランダムに描画した図形を動かしてみる
では、解説していきます。
スポンサーリンク
Canvasとは？
CanvasはHTML5で追加された使用です。ざっくり説明すると、Canvasはウェブページに図形を描くための技術になります。図形を描くことはもちろん、パラパラ漫画のように図形を動かしたりすることもできます。画像の取りにも対応しています。これらは<canvas>とJavaScriptを組み合わせることで実現することができます。
Canvasを使用する
では、実際にCanvasを使用してみましょう。
まずはHTMLの準備からです。<canvas>をHTMLに記述します。下記のサンプルではid属性の値に「myCanvas」を指定していますが、任意のものにご変更いただいて問題ありません。
HTML
<canvas id="myCanvas"></canvas>
続いて設置したCanvas要素を取得し、getContext("2d")で描画機能を利用できるようにします。下記例では「2d」の描画が有効になります。
JavaScript
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
以上でCanvasを使用する準備は完了です。
少し話が脱線しますが、もしCanvasのサイズを親要素の横幅、縦幅に合わせたい場合は下記のように追記します。
HTML
<div id="app">
<canvas id="myCanvas"></canvas>
</div>
CSS
#app {
width: 100%;
height: 100vh;
}
JavaScript
const parent = document.getElementById("app");
const canvas = document.getElementById("myCanvas");
const canvasWidth = parent.clientWidth;
const canvasHeight = parent.clientHeight;
const context = canvas.getContext("2d");
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);
//ここに処理を追加する
以上でCanvasのサイズがページ読み込み時点の親要素の横幅・縦幅で表示されるようになります。
脱線はここまでにして、次に進みましょう。
