ボタンのクリックで HTML5 キャンバスに多角形を描画する次のコードがあります。ユーザーは、半径、辺、x および y 座標を指定します。辺を使用して、正多角形を描画する必要があります。最初に moveTo() を使用して周囲に移動し、辺に応じて lineTo() を使用して線を描画します。
js.js
function drawPolygon() {
var numberOfSides = prompt("Enter number of sides");
var Xcenter = prompt("Enter x");
var Ycenter = prompt("Enter y");
var size = prompt("Enter radius");
var con=document.getElementById("myCanvas");
var cxt=con.getContext("2d");
cxt.beginPath();
cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));
for (var i = 1; i <= numberOfSides;i += 1) {
cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
cxt.strokeStyle = "#000000";
cxt.lineWidth = 1;
cxt.stroke();
}
function registerEvents(){
var poly = document.getElementById("polygon");
poly.addEventListener( "click", drawPolygon, false);
}
window.addEventListener('load', registerEvents, false);
入力を提供した後、キャンバスには何も描画されません。私のコードは間違っていますか?