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

2020年6月3日システムcanvas,JavaScript,プログラムコード

【初心者】JavaScriptでcanvasに図形を描画するプログラミング~Path2D~を解説【プログラミング初心者の入門講座】
【初心者】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で図形を定義して描画するプログラミングコードを解説しました。

\今なら/Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です!

  • 5,000円以上:0.5%
  • 20,000円以上:1%
  • 40,000円以上:1.5%
  • 90,000円以上:2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク:Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク:Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000~500ポイント」が当たるチャンス!なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク:Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年6月3日システムcanvas,JavaScript,プログラムコード

Posted by UT