javascript - 在 HTML5 Canvas 上绘制多边形时出错

Question

我有以下代码可以通过单击按钮在 HTML5 Canvas 上绘制任何多边形。用户提供半径、边、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);

提供输入后， Canvas 上不会绘制任何内容。我的代码有误吗？

Answer 1

您的数学计算有误，因为您没有将输入转换为数值。

例如Ycenter + size * Math.sin(0) 不会返回正确的结果，除非 Ycenter 和 size 是数值。

你可能应该这样做:

var Xcenter = parseFloat(prompt("Enter x"));
var Ycenter = parseFloat(prompt("Enter y"));
var size = parseFloat(prompt("Enter radius"));