【Canvas】図形を描画する方法｜パーティクルアニメーションを自作しよう②

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

本記事は、Canvasでパーティクルアニメーションを自作する連載の第二回です。

前回はCanvasの概要と基本的な使い方をご紹介しました。詳しくは下記の記事をご参照ください。

今回は実際にCanvasを使って図形を描画する方法をご紹介していきます。下記の項目の中では②の内容となります。

• ①基本的な使い方
• ②図形を描画する
• ③図形を動かす
• ④指定数の図形をランダムな座標に描画する
• ⑤ランダムに描画した図形を動かしてみる

では、解説していきます。

Canvasに図形を描画する

前回作成したCanvasに図形を描画するスクリプトを追記します。なお使用するCanvasは親要素のサイズに合わせて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);

//この行以降に図形を追加する

では、実際に図形を描画してみましょう。本記事では図形として一般的な四角形、三角形、円弧、線の4種類の図形を作成していきたいと思います。

補足

Canvasで頻繁に使用するメソッドに「fill()」と「stroke()」があります。ざっくりと説明すると下記のような意味合いになります。

fill()	fill()メソッドは図形を塗りつぶします
fillStyle()	fillStyle()メソッドは図形を塗りつぶす色を指定します
stroke()	stroke()メソッドは図形の輪郭に沿って線を描きます
strokeStyle()	strokeStyle()メソッドはstroke()メソッドの線の色を指定します

「fill()」は図形を塗りつぶし、「stroke()」は図形の輪郭線を描くと覚えていただければと思います。

四角形

まずはスタンダードな四角形から。四角形の作り方は簡単です。下記のようにX軸・Y軸の座標と四角形のサイズを指定するだけです。

context.fillRect(x, y, width, height);

では、実際にCanvasに四角形を描いてみましょう！今回は四角形に色を付けたいのでfillStyle()で塗りつぶし色を指定します。

context.fillStyle = "#00c2bc";
context.fillRect(40, 40, 100, 100);

実行すると下記のデモの表示になります。

See the Pen
Particles1 | Canvas + HTML5 by ryohei (@intotheprogram)
on CodePen.

ここでは一つだけ四角形を描いていますが、複数描くことも可能ですので、色々試してみてくださいね。

三角形

次は三角形を描画してみます。fillRect()のように三角形を描画するための便利のメソッドは用意されていないため、線を引いて、線の中を塗りつぶすことで三角形を描きます。

使用するメソッドは下記のとおりです。

beginPath()	現在のパスをリセットします
closePath()	closePath()メソッドは指定したパスを閉じる際に使用します。fill()メソッドやstroke()メソッドを使用する場合は自動でパスが閉じられるのでclosePath()メソッドを使用する必要はありません
moveTo(x, y)	moveTo()メソッドは線を開始点（図形が始まる場所）の座標を指定します
lineTo(x, y)	lineTo()メソッドは直前に指定された座標とlineTo()メソッドに指定した座標までを線でつなぎます

イメージとしては「moveTo(x, y)」で図形の開始点を決めて、「lineTo(x, y)」で開始点から伸ばすパスを指定し、「fill()」や「stroke()」で図形を描画するといった流れです。

予習も済んだところで、実際にCanvasに三角形を描いてみましょう！

context.beginPath();
context.moveTo(90, 40);
context.lineTo(140, 140);
context.lineTo(40, 140);
context.fillStyle = "#00c2bc";
context.fill();

実行すると下記のデモの表示になります。

See the Pen
Particles2 | Canvas + HTML5 by ryohei (@intotheprogram)
on CodePen.

三角形は表示されましたか？

もし表示されているのであれば、四角形のときと同様に、三角の形を変えたり、量産したりして使い方に慣れておきましょう！

円弧

次は丸い図形（円弧）を描画してみます。円弧は四角形のように特別なメソッドが用意されています。

arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )	arc()メソッドは円弧）を描く際に使用するメソッドです。x, yに円弧の中心座標を指定し、radiusに円弧の半径を指定します。startAngleには開始角度を、endAngleには終了角度を指定します。任意の引数であるanticlockwiseは円弧の描く順番を時計回りにするか反時計回りにするかを真偽（true, false）で指定します。

長々と説明しましたが、まずは実践！Canvasに円弧を描いてみましょう。

context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fillStyle = "#00c2bc";
context.fill();

実行すると下記のデモの表示になります。

See the Pen
Particles1 | Canvas + HTML5 by ryohei (@intotheprogram)
on CodePen.

無事円弧が表示されましたね！
Math.PIは円周率を取得しています。2を乗算することで360°となります。半円を描く場合はMath.PIを指定しましょう。

線

最後に線の描き方をご紹介します。方法は上でにご紹介した三角形の作り方と同じです。描画方法に「stroke()」メソッドを指定することで線を描くことができます。

context.beginPath();
context.moveTo(90, 40);
context.lineTo(140, 140);
context.lineTo(40, 140);
context.lineTo(90, 40);
context.strokeStyle = "#00c2bc";
context.stroke();

実行すると下記のデモの表示になります。

See the Pen
Particles4 | Canvas + HTML5 by ryohei (@intotheprogram)
on CodePen.

以上でCanvasで主に使用する図形の描画方法になります。

次回は描画した図形をCanvas上で動かす方法についてご紹介していきたいと思います。