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

2020年6月3日システムcanvas,JavaScript,プログラミング初心者

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

どうも、UT(@ut_1029)です。

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

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

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部分の解説です。

文字コードを指定

HTMLheadタグ内に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は、円弧の作成方向

おわり

今回はcanvasタグへPath2Dで図形を定義して描画するプログラミングコードを解説しました。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年6月3日システムcanvas,JavaScript,プログラミング初心者

Posted by UT