【超丁寧】canvasアニメーション(Shooting Star)を画像の上で動かす【day128】

canvasをつかったアニメーション(Shooting Star)を画像の上で動かすのに苦戦したので、解決策をアウトプットします。

こんにちは。駆け出しコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけると泣いて喜びます！

【canvas】アニメーション(Shooting Star)を画像の上で動かす
あとがき

【canvas】アニメーション(Shooting Star)を画像の上で動かす

今日は、ここ数日苦しんでいた #canvas沼から一応帰ってきたのでアウトプットをしたいと思います。

・canvasって何？
・Shooting Starってどんなアニメーション？
・canvasのアニメーションを画像の上で動かしたい

という方の参考になる記事を書きたいと思います！

canvasって何？

まず、簡単にcanvasについてのアウトプットです。

canvasとは、

htmlの<canvas>タグと、JavaScriptを使って図形を描画する技術のことです。

たとえば、

円や四角形などの図形
画像とテキストを合成
色や背景のスタイル、グラデーション

などさまざまなことができます。

それ、ふつうに画像や背景画像を使うほうが楽では？
→ canvasを使うメリットがある
・JSで描画するので画像に比べてデータが軽い
・ユーザーによって異なる画像を表示させること可能
・タイマーと組み合わせて、時間で変化する描画も可能
・WebGL(three.jsなど)を使い3Dグラフィックスも描画できる

canvasを使うには、

<!--html-->

<canvas id="id名" width="canvasの横幅" height="canvasの縦幅"></canvas>

以上のhtmlコードと、描写のコードを書いたJSファイルを</body>の直前に読み込むだけです！

線、円、四角形などは以下のコードを書くだけで簡単に描写ができます。

図形が描ける！HTML5のcanvasの書き方【初心者向け】 | TechAcademyマガジン

初心者向けにHTML5でcanvasを書く方法について解説しています。canvasは図形や2Dのグラフィックを作成する際に用いられますが、本格的なアプリケーションを作ることも可能です。HTMLとJavaScriptで作成できます。

Shooting Star(シューティングスター)とは？

今回、実装したいShooting Startは 「3Dアニメーション」です。

hoverで軌跡がキラキラになる、とても綺麗なアニメーション↓

(引用：Codepen よりShooting Star )

3DアニメーションのためcanvasとJSだけではできず、WebGLという3Dを表示させる仕様を使います。

WebGLをそのまま扱おうとすると、とても高度で大変なので「three.js」と呼ばれるライブラリがよく用いられます。

こちらのアニメーションはすでに先人が作った完成品であり、今回はこちらに記載されているコードを使用させていただきます。 (こちらのJSのコード、エグいのでぜひ見てみてくださいw)

他にもcanvasを使ったアニメーションの完成品はたくさんあり、面白いです！

背景にも使える！かっこいいドットアニメーション | 株式会社Cruw（クルー）

Canvasを利用したオシャレ＆カッコいいアニメーションを６つご紹介。背景に動画を取り込むのもいいですが、Canvasを利用すればお手軽に背景にアニメーションを入れることができます。

それでは次の項から、このcanvas + JS + three.js を使ったShooting Starのアニメーションを、画像の上で実現していきます！（画像の上ってのが難しかった……）

【丁寧な解説】Shooting Starを画像の上で実装する

手順に沿って実装すればOKです。

<canvas>タグ

まず<cavas>タグを使って、描写をする場所を作成します。

<body>
    <div>
        <canvas id="canvas" width="640" height="340"></canvas>
        <div class="img-flower"></div>
    </div>
</body>

まず<canvas>、下に画像のための<div>を作成します。

Natsumiさん(@nnnyan_tsu)の助言から背景画像の方が扱いやすかったため、imgタグ使っていません。ありがとうございます！

各種ファイル読み込み

①CSSファイル

<head>
<link rel="stylesheet" href="style.css">
</head>

②JSファイル

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>
<script type="text/javascript" src="script.js"></script>

JSファイルの読み込みは、3つあります。完成JSコードを書くscript.jsと、あとの２つは必要なライブラリです。

【ライブラリCDNのURLを取得】

こちらのページのCodePen左下にある「Resources」をクリック

次の画面に書いてある、2種類のCDNをコピーして、</body>前に読み込む。

</body>前に記載するscriptの順番は、CDN→script.jsの順番です。
逆にすると、Shooting Starが機能しません。(ハマった)

JSコードをコピぺする

Codepenから、既存のJSコードをコピーして、script.jsにペーストします。

めちゃめちゃ長いコードです。全てコピーして貼り付けます。

CSS

div {
  margin-top: 30px;
  width: 640px;
  height: 340px;
}
.img-flower {
  position: relative;
  background-image: url("flower.jpg");
  width: 640px;
  height: 340px;
}
#canvas {
  display: block;
  position: absolute;
  z-index: 2;
}

CSSは以上のように書きました。画像は、backgroundで表示させます。

構造としては、

relative：画像
absolute：canvas

のように、画像の上にcanvasを重ねた状態です。absoluteにはz-index:2;を指定しました。

画像はこちらをo-danから拝借しました。