JavaScript：三角形の描画

JavaScript

悪い例

beginPathに対してパスを閉じていない

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{ margin: 0; padding: 0; }
    </style>
    <script src="main.js"></script>
    <title>キャンバス三角形</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// main.js
function drawTriangle(){
    // キャンバスの初期設定
    const canvas = document.getElementById("canvas");
    const g = canvas.getContext("2d");  // 描画コンテキストを取得：キャンバスに2D描画するため必要
 
    // 三角形を描画
    g.strokeStyle = "forestgreen";
    g.lineWidth = 10;
 
    g.beginPath();
    g.moveTo(250, 100); // 始点を移動
    g.lineTo(100, 350); // 始点からパスを作成
    g.lineTo(400, 350);
    g.lineTo(250, 100);
    g.stroke();         // パスを描画
 
}
 
window.addEventListener("load", drawTriangle);

良い例

beginPathに対して、パスを閉じるclosePathを使う

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// main.js
function drawTriangle(){
    // キャンバスの初期設定
    const canvas = document.getElementById("canvas");
    const g = canvas.getContext("2d");  // 描画コンテキストを取得：キャンバスに2D描画するため必要
 
    // 三角形を描画
    g.strokeStyle = "forestgreen";
    g.lineWidth = 10;
 
    g.beginPath();
    g.moveTo(250, 100); // 始点を移動
    g.lineTo(100, 350); // 始点からパスを作成
    g.lineTo(400, 350);
    // g.lineTo(250, 100);←これは×
    g.closePath(); // 〇 パスを閉じる
    g.stroke();         // パスを描画
 
}
 
window.addEventListener("load", drawTriangle);

コメント