2

ボタンのクリックで 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);

入力を提供した後、キャンバスには何も描画されません。私のコードは間違っていますか?

4

2 に答える 2