javascriptのcanvasで、頂点座標と辺の長さのパラメータを入力して正三角形を描きたいのですが、うまく作動しません。まだ始めたばかりでどこが違うのかわからないです。
###ソースコード
javascript
1<!DOCTYPE html> 2<htmel> 3 <head> 4 <meta charset = "UTF-8"> 5 <title> キャンバス </title> 6 7 <style> 8 canvas{ 9 border:solid 1px; 10 } 11 </style> 12 </head> 13 <body> 14 <canvas id = "main" width = "700" height = "700"> 15 </canvas> 16 17 <br> 18 <input type = "button" value = "正三角形" onclick = "triangle()"> 19 <br> 20 21正三角形: 22 <br> 23 頂点 x = <input type = "number" id = "x4" value = "10"> 24 頂点 y = <input type = "number" id = "y4" value = "10"> 25 辺の長さ l = <input type = "number" id = "l4" value = "10"> 26 <br> 27 28 <script> 29 function triangle(){ 30 var canvas = document.getElementById("main"); 31 var context = canvas.getContext("2d"); 32 var start_x = document.getElementById("x4").value; 33 var start_y = document.getElementById("y4").value; 34 var side = document.getElementById("l4").value; 35 var pi = Math.PI; 36 var a = Math.sin(1/3 * pi) * side; 37 var b = Math.cos(1/6 * pi) * side; 38 context.beginPath(); 39 context.moveTo(start_x, start_y); 40 context.lineTo(start_x + b, start_y + a); 41 context.lineTo(start_x, start_y + side); 42 context.closePath(); 43 context.stroke(); 44 } 45 </script> 46 </body> 47</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/30 11:29