CANVASタグを利用して図形を描画

パソコン操作
<!DOCTYPE html>
<html>
<head>
    <meta sharset="UTF-8" />
    <title>図形を描画する</title>
    <style>
        canvas{
            background-color:navy;
        }
    </style>
</head>
    <body onload="draw()">
        <h1>図形を描く</h1>
        <canvas id="region" width="400" height="400"></canvas>
        <!--HTML5の描画領域を指定-->
        
            <script>
                function draw() {
                    //関数drawを定義
                    //キャンバス「kami」を定め、kamiは2次元の領域であることを定めた
                    var kami = document.getElementById("region");//対象のキャンバス指定
                    var kaku = kami.getContext("2d");//kakuはキャンバスの2次元領域

                    kaku.lineWidth="8";
                    kaku.lineCap = "butt";
                    kaku.lineCap ="round";

                    // X座標(横方向)とY座標(縦方向)
                 //三角形パスが開いている図形
                    kaku.moveTo(20,50);
                    kaku.lineTo(200,50);
                    kaku.lineTo(200,150);

                  //三角形のパスを閉じた図形
                    kaku.moveTo(250,50);
                    kaku.lineTo(350,50);
                    kaku.lineTo(350,150);
                    kaku.closePath();

                    // 円を描く
                    kaku.arc(200,300,50,0,360*Math.PI/180);

                    //四角形
                    kaku.moveTo(20,280);
                    kaku.lineTo(150,280);
                    kaku.lineTo(180,370);
                    kaku.lineTo(70,370);
                    kaku.closePath();

                    //不定形(5角形)
                    kaku.moveTo(250,200);
                    kaku.lineTo(350,320);
                    kaku.lineTo(300,300);
                    kaku.lineTo(300,200);
                    kaku.lineTo(250,300);
                    kaku.closePath();

                    //四角を1行で描く
                    kaku.strokeRect(5,5,40,40);

                    //四角に色を付ける
                    kaku.strokeStyle = 'white';
                    kaku.fillStyle= 'yellow';
                    kaku.strokeRect(40,20,50,50);
                    kaku.fillRect(5,80,50,50);

                    kaku.stroke();//ここで描画を行う
                }
            </script>
    </body>
</html>

コメント

タイトルとURLをコピーしました