Canvas APIを学んだのでまとめてみた

HTML
2022.08.24
みくさん
みくさん

アニメーションの学習をしていたらCanvas APIが気になったので学びました！

経緯

  1. グラフィックを描画する経験を積みたい
    実装したいものに3D表現が必要と感じたのでthree.jsを学びましたが、簡単な表現はできても、自分が作りたいものを形にするということが現時点ではできませんでした。まだまだまだまだ力不足で悔しいです。 時間はかかるかもしれませんが今後いつか実装できるように、まずはグラフィックをサイト上に描画するという経験を積みたいと思いました。

  2. 実装したいものの参考コードにCanvas2Dが使用されていたけど読めない
    参考にしていたコードに「canvas.getContext(’2d’)」と記述されており、それ以降のコードが読めなかったので読むために勉強したいと思いました。

以上、二点の経緯で今回Canvas APIを学ぶことにしました。

Canvas APIとは

HTMLのcanvasタグとJavaScriptを使用してグラフィックを描画する方法です。 二次元・三次元のグラフィックスを描画するためのコンテキストには同じくWebGL APIがあります。 違いについてはこちらの記事が勉強になりました。

▼HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 （前編） – ICS MEDIA https://ics.media/entry/5140/

実装方法（スマイルを作ってみる）

こちらの記事を参考に自分なりに解釈して描画してみようと思います。

▼キャンバスでの図形の描画 – Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

宣言

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>smile</title>
    <script type="module" src="/main.js" defer></script>
</head>
<body>
    <canvas class="canvas" id="canvas"></canvas>
</body>
</html>

//　要素を取得
const canvas = document.getElementById('canvas');
canvas.width = 150;
canvas.height = 150;

//　宣言
const context = canvas.getContext('2d');

この宣言を記述することで、canvasタグのgetContextメソッドを使用します。引数で2dを指定するとCanvasRenderingContext2Dを呼び出し、画面に描画できるようになります。

描画開始

/** 
 * 外側（輪郭）の円
 */

// 描画開始
context.beginPath();

// 円を書く
context.arc(75, 75, 50, 0, Math.PI * 2, true);

//　塗り潰しの色
context.fillStyle = '#ffffe0';

//　塗り潰しを描画
context.fill();

// 枠線を描画
context.stroke();

CanvasRenderingContext2D（context）には様々なプロパティやメソッドがあります。今回は使用したもののみ記述します。

  • beginPath() – 新しい線を作成する際に記述します
  • arc(x, y, radius, startAngle, endAngle, counterclockwise) – (x, y)を中心にして半径・開始角度・終了角度・方向にしたがった円を書くきます(x, y, 半径, 開始角度, 終了角度, 方向)
  • fillStyle – 図形を塗りつぶす際に指定するスタイルを設定します
  • fill() – 図形の内部を塗りつぶします
  • stroke() – 図形の輪郭を書きます
/** 
 * 口の線
 */

// 座標を移動
context.moveTo(110, 75);

// 半円を書く
context.arc(75, 75, 35, 0, Math.PI, false);

// 線の端のスタイル
context.lineCap = 'round';

// 線を描画
context.stroke();
  • moveTo(x, y) – (x, y)にペンを移動させます
  • lineCap – 線の端のスタイルを設定します
/** 
 * 目の円
 */

// 左目
// 新たに線を書くという宣言
context.beginPath();

// 円を書く
context.arc(60, 63, 3, 0, Math.PI * 2, true);

// 塗り潰しの色
context.fillStyle = '#000000';

// 塗り潰しを描画
context.fill();

// 線を描画
context.stroke();

// 右目（左目と同じ項目なので説明は割愛します）
context.beginPath();
context.arc(90, 63, 3, 0, Math.PI * 2, true);
context.fillStyle = '#000000';
context.fill();
context.stroke();

最後に目を描くのですが、再度beginPath()を宣言しています。 その理由は、ひとつ前に書いた口の半円がオープンパスだからです。目を描く手順の最後にfill()を使用しますが、これは開いている図形が自動的に閉じられます。beginPath()なしで記述すると目と口がつながって意図しない図形となってクローズしてしまうのでbeginPath()を使用しました。

codepen

See the Pen Canvas-smile by miku-asai (@miku-asai) on CodePen.

応用して紅葉を降らせてみた

もうすぐ秋になるので作成してみました。

See the Pen Canvas-momiji by miku-asai (@miku-asai) on CodePen.

感想

Canvas APIを学習した結果、参考にしていたコードは読めるようになり、canvasやJavaScriptの理解も勉強を開始する前より深まりました。手探りでしたが自分の身になった学習だと思いました。 生産性の面でJavaScriptのライブラリを使用した方が効率が良いと参考資料で拝見したので、今後は2dのライブラリも使用してみたいと思いました。

コメント