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

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>