ウェブページを作ってみよう

    canvasの基礎

    canvasとは

    canvasは、動的なグラフィックスや図形、アニメーションを描画するためのHTMLタグです。

    Webページ上に、図形・グラフ・イメージ・文字などを描画できます。

    また、JavaScriptを使用することで、リアルタイムに動的グラフィックスを描画したり、アニメーションを作成できます。

    次のようなJavaScriptコードで、canvasを使用できます。

    <canvas id="myCanvas" width="200" height="100"></canvas>
    
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "red";
      ctx.fillRect(10, 10, 50, 50);
    </script>

    このSAMPLEでは、idが「myCanvas」のcanvas要素が作成されます。

    次に、getContextメソッドで、2D描画コンテキストを取得します。

    fillStyleプロパティを設定して、四角形を塗りつぶす色を設定します。

    最後に、fillRectメソッドで、四角形を描画しています。

    基本的な図形を描画する

    円の描画

    <canvas id="myCanvas" width="200" height="200"></canvas>
    
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, 2 * Math.PI);
      ctx.stroke();
    </script>

    線の描画

    <canvas id="myCanvas" width="200" height="100"></canvas>
    
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(200, 100);
      ctx.stroke();
    </script>

    文字の描画

    <canvas id="myCanvas" width="200" height="100"></canvas>
    
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World!", 10, 50);
    </script>

    後から書く

    window上にcanvasを用意しておき、そこに後から描画することができます。

    JavaScriptによって、図形や文字の描画を動的に行うことができるからです。

    例えば、マウスがクリックされた場所に円を描画できます。

    <style>
        canvas {
            background-color: pink;
        }
    </style>
    
    <canvas id="myCanvas" width="300" height="300"></canvas>
    
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        canvas.addEventListener("click", function(event) {
            var x = event.clientX;
            var y = event.clientY;
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
            ctx.fill();
        });
    </script>

    See the Pen canvasマウスがクリックされた場所に円を描画する by MacLove (@maclove1) on CodePen.

    このように、JavaScriptを使用することで、canvasへの図形描画を動的に行えます。また、setIntervalやrequestAnimationFrameというメソッドで、アニメーションを作成することもできます。

    アニメーション

    アニメーションは「描画処理」を繰り返し行うことで実現します。

    setIntervalで、指定ミリ秒ごとに繰り返し処理を実行します。

    例えば、ボールが自由落下するようなアニメーションは以下のようになります。

    <style>
        canvas {
            background-color: pink;
        }
    </style>
    
    <canvas id="myCanvas" width="300" height="300"></canvas>
    
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var x = 100;
        var y = 0;
        var vy = 5;
        setInterval(function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
            ctx.fill();
            y += vy;
        }, 50);
    </script>

    See the Pen canvas自由落下する円 by MacLove (@maclove1) on CodePen.

    clearRectメソッドで、一度画面を消去して、前の描画を消しています。

    描画の後に、座標を変更することで、次の描画位置が変わるため、動いているように見えます。

    昔のホームページにあったような、動く文字を作ってみた

    <style>
        canvas {
            background-color: black;
        }
    </style>
    
    <canvas id="myCanvas"></canvas>
    
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "32px Arial"; // フォント
        ctx.textAlign = "center"; // 横方向の位置
        ctx.textBaseline = "middle"; // 縦方向の位置
        ctx.fillStyle = "#8cff6f"; // 文字色
        var x = 0; // x座標
        // 文字を左から右に動かすアニメーション(画面クリア、文字を描画、文字の位置を変更する処理を繰り返し行う)
        // setIntervalで、100ミリ秒ごとに処理を実行する
        setInterval(function() {
            // 以前の描画を消去
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 文字を描画する(文字, x座標, y座標)
            ctx.fillText("Hello World!", x, canvas.height / 2);
            // x座標に加算する
            x += 10;
            // 左端までいったらx座標を初期化する
            if (x > canvas.width + 100) {
                x = 0;
            }
        }, 100);
    </script>