JavaScriptでcanvasに図形を描画するプログラムを解説【Path2D】

2020年6月3日2022年10月26日プログラムcanvas,JavaScript,プログラムサンプル

【初心者】JavaScriptでcanvasに図形を描画するプログラミング～Path2D～を解説【プログラミング初心者の入門講座】

JavaScriptでcanvasタグへPath2Dを使用して図形を描画するプログラミングを解説します。今回のプログラミングにおいて「canvasチュートリアル」を参考に実装しました。

前回の「JavaScriptでcanvasに図形を描画するプログラミングを解説」でcanvasタグの基本を解説した記事もぜひご覧ください。

Contents

1. JavaScriptでcanvasに図形を描画するプログラミング～Path2D～のサンプルコード
2. JavaScriptでcanvasに図形を描画するプログラミング～Path2D～の解説
- 2.1. HTML部分
- 2.2. JavaScript部分
3. おわり

JavaScriptでcanvasに図形を描画するプログラミング～Path2D～のサンプルコード

JavaScriptでcanvasタグへPath2Dを使用して図形を描画するプログラミングコードのサンプルコードです。

<html>
<head>
    <meta charset="utf-8">
    <title>canvas sample - Path2D</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>canvas sample - Path2D</h1>
    <h2>rectangle</h2>
    <canvas id="rectangle"></canvas>
    <h2>circle</h2>
    <canvas id="circle"></canvas>
    <script>
        // rectangle
        var rectangle = document.getElementById('rectangle');

        if (rectangle.getContext) {
            var path2d_rectangle_1 = new Path2D();
                path2d_rectangle_1.rect(10, 10, 50, 50);
            var path2d_rectangle_2 = new Path2D();
                path2d_rectangle_2.rect(10+50, 10, 50, 50);
            var ctx = rectangle.getContext('2d');
                ctx.strokeStyle = "rgba(255,165,0,1)";
                ctx.fillStyle = "rgba(255,165,0,1)";
                ctx.stroke(path2d_rectangle_1);
                ctx.fill(path2d_rectangle_2);
        }

        // circle
        var circle = document.getElementById('circle');
        if (circle.getContext) {
            var path2d_circle_1 = new Path2D();
                path2d_circle_1.arc(35, 35, 25, 0, 2 * Math.PI);
            var path2d_circle_2 = new Path2D();
                path2d_circle_2.arc(35+25*2, 35, 25, 0, 2 * Math.PI);
            var ctx = circle.getContext('2d');
                ctx.strokeStyle = "rgba(255,165,0,1)";
                ctx.fillStyle = "rgba(255,165,0,1)";
                ctx.stroke(path2d_circle_1);
                ctx.fill(path2d_circle_2);
        }
    </script>
</body>
</html>

JavaScriptでcanvasに図形を描画するプログラミング～Path2D～の解説

JavaScriptでcanvasタグへPath2Dを使用して図形を描画するプログラミングの解説です。

HTML部分

HTML部分の解説です。

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">

Webページが文字化けする原因は、大体がmetaタグで文字コードを指定出来ていない事が多いです。

canvasタグを用意

canvasタグを用意します。このcanvasタグへJavaScriptで図形を描画します。

<canvas id="rectangle"></canvas>

<canvas id="circle"></canvas>

canvasとは

HTML5のcanvas要素は、JavaScriptで図形などを描画することが出来る領域です。

JavaScript部分

JavaScript部分の解説です。

canvasへ四角形を描画

canvasタグのエレメントを取得します。

var rectangle = document.getElementById('rectangle');

Path2Dオブジェクトを取得します。

var path2d_rectangle_1 = new Path2D();
    path2d_rectangle_1.rect(10, 10, 50, 50);

canvasタグへ四角形を描画します。

var ctx = rectangle.getContext('2d');
    ctx.strokeStyle = "rgba(255,165,0,1)";
    ctx.fillStyle = "rgba(255,165,0,1)";
    ctx.stroke(path2d_rectangle_1);
    ctx.fill(path2d_rectangle_2);

canvasへ円を描画

canvasタグのエレメントを取得します。

var circle = document.getElementById('circle');

Path2Dオブジェクトを取得します。

var path2d_circle_1 = new Path2D();
    path2d_circle_1.arc(35, 35, 25, 0, 2 * Math.PI);

canvasタグへ円を描画します。

var ctx = circle.getContext('2d');
    ctx.strokeStyle = "rgba(255,165,0,1)";
    ctx.fillStyle = "rgba(255,165,0,1)";
    ctx.stroke(path2d_circle_1);
    ctx.fill(path2d_circle_2);

canvasの描画処理について

canvasへ図形を描画する際に使用するメソッドを解説します。

canvas関係のメソッド

getContext('2d’)
- 線や円などを描画するメソッドを持っている組み込みオブジェクトを取得
new Path2D()
beginPath()
- 現在のパスをリセット
moveTo(x, y)
- サブパス(パスを構成する線の1本)の開始するX座標とY座標を指定
- 指定する座標は、canvas要素の左上端からの距離
lineTo(x, y)
- 座標を指定してラインを引く
fill()
- パスを塗りつぶす
stroke()
- パスの輪郭を表示
strokeStyle
- 線や輪郭の色やスタイルを指定
rect(x, y, w, h)
- 四角形を作成
  - 引数(x, y)は、四角形の左上の座砲
  - 引数(w, h)は、四角形の幅と高さ
arc(x, y, redius, startAngle, endAngle, anticlockwise)
- 円弧を作成
  - 引数(x, y)は、円弧の中心
  - 引数rediusは、円弧の半径
  - 引数(startAngle, endAngle)は、円弧の開始角度と終了角度
  - 引数anticlockwiseは、円弧の作成方向