Canvasのことをちょっぴり知る #JavaScript

この記事について

HTMLのCanvasで「どんなことができるのか？」「どんな作品ができるのか」というところを重点的にまとめた記事になります。技術的な内容にはあまり触れていないです。

対象者

Canvasを知らない人や触ったことがない人

Canvasとは？

HTML5から導入された図形を描くための技術仕様です。
JavascriptとHTMLの<canvas>を使用して図形を描くことができます。

Canvasを使った作品例だと以下のようなものがあります。

できること

基本的に2Dの図形を対象としていますが、3Dの図形も描けるので、アイディア次第では様々なことが表現できそうです
3Dの図形を描くときは Canvas APIではなくWebGL APIを使用して描きます。

2Dでできることは以下です。

円や四角などの色々な形の図形の作成
それらを変形させる
グラデーションをつける
画像との合成やクリッピング
アニメーションをつける（CSSのアニメーションではなくCanvasAPIで用意されてるアニメーション）

基本的な描画の流れ

HTMLで<canvas>要素のwidthとheightとidを指定する
getElementByIdメソッドで要素を取得して、getContextメソッドの引数に2Dを渡すと2Dの図形を描画するのに必要なメソッドやプロパティを持つオブジェクトが取得できます
canvasAPIの機能を使用して図形を描く

widthとheightを指定しないとデフォルトでwidth:300pxのheight:150pxとして設定されます。この枠の中がキャンバスとなって図形を描くスペースとなります。
引数に webglを渡すと3Dの図形を描画できるオブジェクトが取得できます。

index.html

<canvas id="canvas"></canvas>

main.js

// DOMの中からcanvas要素を取得
const canvas = document.getElementById('canvas');
// 2Dの図形を描画するメソッドやプロパティを持ったオブジェクトを取得
const ctx = canvas.getContext('2d');
// 色を緑色に指定
ctx.fillStyle = 'green';
// 四角を描画(x, y, 幅, 縦)
ctx.fillRect(10, 10, 150, 100);

See the Pen eYdawGg by kena-nk (@kena-nk) on CodePen.

Canvasの基本的なアニメーション

CSSのアニメーション（@keyframesとか）とはちょっと異なります。
Canvasでのアニメーションは以下のように描画されます。

要素を削除
要素を描画
要素を動かす
終了でなければ1.に戻る

イメージとしてはパラパラ漫画のように画面が挿し変わっていく感じです。

再描画を行うループメソッドは以下3つを状況に応じて使い分けるみたいです↓

setInterval()：一定時間ごとに特定の処理を繰り返す
setTimeout()：一定時間後に特定の処理をおこなう
requestAnimationFrame()：ブラウザ描画単位で呼びだされて、次の描画がされる前にアニメーションを実行する関数を呼び出す

See the Pen mdrZbQX by kena-nk (@kena-nk) on CodePen.

試しに作った作品

カーブを描く直線が描けるプロパティで作ったプリン

See the Pen
OJRYYBw by kena-nk (@kena-nk)
on CodePen.
円と直線を組み合わせて作ったドラえもん

See the Pen
WNGBBYP by kena-nk (@kena-nk)
on CodePen.

おわりに

Canvasを初めて触ってみたの感想としては、アニメーション付けなければお絵かきしているような感覚で使えて楽しいな〜と思いました

でも、ただ普通の丸を描くだけでも、x座標やy座標の指定だったり、Mathオブジェクトが頻繁に登場したりで数学が苦手な私的には辛みを感じたのですが。。。図形が完成していく過程は面白かったです！

今回は触っていないのですが、調べてみるとライブラリも充実していました！
実務で使うとしたらやはりライブラリを使用するんですかね？

以下MDNがまとめてくれているライブラリ一覧です🔽
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API#libraries

興味がある方はぜひCanvasチュートリアルやってみてください！！では！！

おまけ

CanvasがHTML5に導入された経緯

Mac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年にアップルが最初に導入した。後に、Mozilla FirefoxやOperaでも採用され、WHATWGで、新しい標準規格として標準化された。

2009年の夏頃に、文字列描画のAPIとピクセル操作のAPIが追加になり、ウェブブラウザに実装された。

その後、HTML Canvas 2D Context, Level 2 が作られ、2012年12月17日に最初の W3C Working Draft が発表になった。

ソース：Wikipedia

要約すると、Appleが最初にDashboardウィジェットやSafariを良くしたくて取り入れたら、その良さに気づいた他のみんなも導入し始めて、最終的にHTML5入れちゃうか！って感じで追加されたのかなと思う

WHATWG(ワットダブルジー)とは？

HTMLと関連技術の開発をするためのコミュニティです！
元々はWeb技術の標準化を行う、World Wide Web(略称:W3C)の対抗組織だったみたいです。

HTML5の策定にあたってW3CとWHATWGは協力関係となり、WHATWGが提唱したものを元にW3Cが策定しました。
2019年からはWHATWGが随時更新していく「HTML Living Standard」をHTML標準と認め、W3Cが独自に規格を策定しないことなどが合意されました。

MDNが公式ドキュメントだと思ってたけどHTML Living Standardが公式ドキュメントみたいです。

参考サイト

Canvasアニメーションの要点
https://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1

Canvasのイベント操作まとめ
https://qiita.com/nekoneko-wanwan/items/9af7fb34d0fb7f9fc870

Canvasチュートリアル
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial