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

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

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍