Canvas API の基本的な使い方 #JavaScript

はじめに

技術系同人誌を書くつもりでエディタを開いたのですが、何となくエタりそうな気がしたので、とりあえずこちらにまとまっている部分だけでもアップしようと思った次第です。note にも同じ内容をアップしています。

JavaScript で図を描き時の Canvas API の基本的な扱い方、注意点について述べています。なお、登場するメソッドの引数等の説明は行いません。メソッドについて詳しく知りたい方は MDN などで調べて下さい。

See the Pen Canvas APIの基本 by よいち　ろくろう (@v416) on CodePen.

それでは、雛形となる html を用意しましょう。

index.html

    <!DOCTYPE html>
    <html lang="ja">
     <head>
       <meta charset="utf-8"/>
     </head>
     <body>
       <canvas id="cvs">
       </canvas>
       <script>
       </script>
     </body>
    </html>

script タグを body の中に書いています。これから記述する JavaScript は、すべて script タグの中に書いて下さい。

直線を描く

canvas 要素は 2D レンダリングコンテキストというインスタンスを持ち、このオブジェクトが持つメソッドを使って図形、文字、画像といったものを描画します。手始めに 2D レンダリングコンテキストを取得し、直線を描いてみましょう。

const canvas = document.getElementById('cvs');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 10);
ctx.stroke();

canvas ではまずパスを設定し stroke メソッドを使って線を描画します。まず beginPath でパスの開始を宣言します。それから moveTo で始点を指定し lineTo で中間点を指定します。そして stroke を実行すれば直線が描かれます。

四角形を描く

点を結べば四角形を描くことができます。

ctx.beginPath();
ctx.moveTo(60, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 50);
ctx.lineTo(60, 50);
ctx.closePath();
ctx.stroke();

closePath は最後に指定した中間点と moveTo で指定した始点とを結ぶメソッドです。lineTo で始点を指定しても挙動は同じになります。

四角形は始点と縦横の幅が分かればいいので moveTo から closePath までをまとめた rect というメソッドがあります。そして塗りつぶしを行う時は fill メソッドを使います。

ctx.beginPath();
ctx.rect(110, 10, 40, 40);
ctx.fill();

注意してもらいたいのは beginPath から fill/stroke まではひとまとまりのコマンドだということです。例えば以下のようなコードを組んだ場合、最初の四角形は枠線のみで次の四角形は塗りつぶしの描画を期待すると思います。

ctx.beginPath();
ctx.rect(10, 60, 40, 40);
ctx.stroke();
ctx.rect(60, 60, 40, 40);
ctx.fill();

しかし、実行してみてもらえば分かる通り、両方とも塗りつぶしの四角形になります。ポイントは beginPath で、このメソッドがパスから描画までの一連の流れをリセットする命令になっています。なので stroke の後に beginPath を入れると想定通りの描画になります。

なお、四角形には beginPath から fill/stroke までをひとまとめにしためドッドも存在します。

ctx.fillRect(160, 10, 40, 40);
ctx.strokeRect(160, 60, 40, 40);

円を描く

今度は円を描いてみましょう。

ctx.beginPath();
ctx.arc(230, 30, 20, 0, 2 * Math.PI);
ctx.stroke();

arc は円弧のパスを設定するメソッドです。このメソッドで気をつけたいのは、弧の始点座標です。

ctx.beginPath();
ctx.arc(230, 80, 20, 0, Math.PI / 2);
ctx.stroke();

中心座標から右に半径分ずらした座標が始点になります。そして時計回りにパスが設定されます。角度の単位もラジアンになりますので、そこも注意が必要です。

早足でしたが、以上が Canvas API の基本的な使い方、注意点になります。次回はこれらを念頭に置いた、トランプ画像の描き方について述べるつもりです。

それでは。