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

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

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

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

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

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

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部分の解説をします。

文字コードを指定

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

おわり

今回はcanvasタグへ図形を描画するサンプルコードを紹介しました。

現在もcanvasタグへ図形を描画するプログラミングを実装する頻度が高まっています。なので、基本をしっかり理解しておくと活用できるスキルの習得へ繋がります。

ぜひ理解する為に実際にプログラミングして一緒に習得しましょう。

プログラミング解説講座

UT
UTの日常

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

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

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

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

Posted by UT