Canvas API

キャンバスエーピーアイ（API & Web機能）

意味 2D図形・画像を描画

Canvas APIとは？

Canvas APIは、2Dの図形や画像を描画・操作するためのAPIです。

Canvas APIの具体的な使い方

Canvas基本描画の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvas基本描画</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 長方形を描画
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 80);

    // 円を描画
    ctx.beginPath();
    ctx.arc(200, 100, 50, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();

    // テキストを描画
    ctx.font = '20px Arial';
    ctx.fillStyle = 'green';
    ctx.fillText('Hello Canvas!', 70, 180);
  </script>
</body>
</html>

Canvas APIを使用して、長方形、円、テキストを描画する基本的な例を示しています。

Canvas アニメーションの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvasアニメーション</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="200"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    let x = 0;
    let speed = 2;

    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = 'purple';
      ctx.fillRect(x, 75, 50, 50);
      
      x += speed;
      
      if (x + 50 > canvas.width || x < 0) {
        speed = -speed;
      }
      
      requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>

キャンバスを使用して、紫色の四角形を左右に動かすアニメーションを作成します。四角形が画面端に到達すると、進行方向を反転させます。

Canvas APIに関するよくある質問

Q. Canvas APIとSVGの違いは？

A. Canvas APIはピクセルベースの描画を行い、動的なグラフィックスに適しています。SVGはベクターベースで、拡大縮小に強く、個々の要素を操作できます。

Q. Canvas上の描画物を保存可能？

A. はい、canvas.toDataURL()メソッドを使用して、描画内容を画像形式（PNG, JPEGなど）で保存できます。

Q. Canvasのパフォーマンス対策は？

A. 不要な再描画を避ける、オフスクリーンキャンバスを使用する、requestAnimationFrameを使用する、などの方法があります。

Canvas APIが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのCanvas APIやWeb Storage、Media Capture and Streams、IndexedDB、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。