【Canvas】基本的な使い方｜パーティクルアニメーションを自作しよう①

こんにちは、Ryohei（@ityryohei）です！

本記事は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のサイズがページ読み込み時点の親要素の横幅・縦幅で表示されるようになります。

脱線はここまでにして、次に進みましょう。