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

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

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

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

【勉強】JavaScriptでcanvasへ図形を描画〜三角形〜【プログラミング初心者の入門講座】#StudyWithMe

Contents

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

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

JavaScriptでcanvasへ図形を描画するプログラミングのサンプルコードを紹介します。

<html>
<head>
    <meta charset="utf-8">
    <title>canvas sample</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>canvas sample</h1>
    <h2>triangle</h2>
    <canvas id="triangle"></canvas>
    <h2>circle</h2>
    <canvas id="circle"></canvas>
    <script>
        // triangle
        var triangle = document.getElementById('triangle');
        if (triangle.getContext) {
            var ctx = triangle.getContext('2d');
                ctx.beginPath();
                ctx.moveTo( 25, 25);
                ctx.lineTo( 75, 25);
                ctx.lineTo( 25, 75);
                ctx.fill();

                ctx.beginPath();
                ctx.moveTo( 25+55, 25);
                ctx.lineTo( 75+55, 25);
                ctx.lineTo( 25+55, 75);
                ctx.lineTo( 25+55, 25);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo( 75+55+55, 25);
                ctx.lineTo( 75+55+55, 75);
                ctx.lineTo( 25+55+55, 75);
                ctx.fillStyle = "rgba(255,165,0,1)";
                ctx.fill();

                ctx.beginPath();
                ctx.moveTo( 75+55+55+55, 25);
                ctx.lineTo( 75+55+55+55, 75);
                ctx.lineTo( 25+55+55+55, 75);
                ctx.lineTo( 75+55+55+55, 25);
                ctx.strokeStyle = "rgba(255,1,0,1)";
                ctx.stroke();
        }

        // circle
        var circle = document.getElementById('circle');
        if (circle.getContext) {
            /*
             * x: X座標
             * y: Y座標
             * radius: 円弧の半径
             * startAngle: 円弧の始点
             * endAngle: 円弧の終点
             * anticlockwise: 時計回りまたは反時計回り
             */
            var ctx = circle.getContext('2d');
                var x = 75,
                    y = 75,
                    radius = 20,
                    startAngle = 0,
                    endAngle = Math.PI,
                    anticlockwise = 0;

                ctx.beginPath();
                ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(x+50, y, radius, startAngle, endAngle, anticlockwise);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(x+50+50, y, radius, startAngle, endAngle*2, anticlockwise);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(x+50+50+50, y, radius, startAngle, endAngle*2, anticlockwise);
                ctx.stroke();
        }
    </script>
</body>
</html>

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

JavaScriptでcanvasへ図形を描画するプログラミングの解説をします。

HTML部分

HTML部分の解説をします。

文字コードを指定

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

<meta charset="utf-8">

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

canvasタグを用意

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

<canvas id="triangle"></canvas>

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

canvasタグとは

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

JavaScript部分

JavaScript部分の解説です。

三角形を描画する

三角形を描画するcanvasタグのエレメントを取得します。

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

canvasタグへ三角形を描画するためにgetContext('2d’)でオブジェクトを取得します。

var ctx = triangle.getContext('2d');

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

ctx.beginPath();
ctx.moveTo( 25, 25);
ctx.lineTo( 75, 25);
ctx.lineTo( 25, 75);
ctx.fill();

円を描画する

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

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

canvasタグへ円を描画するためにgetContext('2d’)でオブジェクトを取得します。

var ctx = circle.getContext('2d');

円を描画する座標やサイズを変数へ格納します。

var x = 75,
    y = 75,
    radius = 20,
    startAngle = 0,
    endAngle = Math.PI,
    anticlockwise = 0;

円を描画します。

ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.fill();

canvasの描画処理について

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

canvas関係のメソッド

getContext('2d’)
- 線や円などを描画するメソッドを持っている組み込みオブジェクトを取得
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は、円弧の作成方向