悪い例
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); |
コメント