Javascript 在HTML5画布上绘制多边形时出错

我有以下代码，可以在HTML5画布上单击按钮绘制任意多边形。用户提供半径、侧面、x和y坐标。应使用边绘制任何正多边形。首先，我们使用moveTo（）移动到周界，然后根据边使用lineTo（）绘制线。

js.js

函数drawPolygon（）{
var numberOfSides=提示（“输入边数”）；
var Xcenter=提示（“输入x”）；
var Ycenter=提示（“输入y”）；
变量大小=提示（“输入半径”）；
var con=document.getElementById（“myCanvas”）；
var cxt=con.getContext（“2d”）；
cxt.beginPath（）；
cxt.moveTo（Xcenter+size*Math.cos（0），Ycenter+size*Math.sin（0））；
对于（var i=1；i您的数学计算错误，因为您没有将输入转换为数值

e、 g.
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"));

这是一个甚至支持顺时针/逆时针绘图的函数，您可以使用非零缠绕规则控制填充


//定义具有指定边数和半径的任意正多边形的路径，
//以中心线为中心，提供x和y坐标。
//可选参数：startAngle和逆时针
函数多边形（ctx、x、y、半径、边、星形、逆时针）{
如果（侧面<3）返回；
var a=（Math.PI*2）/边；
a=逆时针方向？-a:a；
ctx.save（）；
ctx.translate（x，y）；
ctx.旋转（startAngle）；
ctx.moveTo（半径，0）；
对于（变量i=1；i
我相信
Ycenter+size*Math.sin（0）
将返回一个字符串，否？尝试将
parseInt（）
应用到您的
提示符
s。我还有一个问题。所有图形都位于左上角（默认设置）。有什么方法可以控制定位吗？@dhani，AFAIK，你必须在坐标中考虑到这一点。但我想有一些库可以为你做到这一点。因为你知道左上角=0,0，你可以很容易地从一开始就ctx.translate（canvas.width/2，canvas.height/2）。这会将画布的中心设置为0,0。
var Xcenter = parseFloat(prompt("Enter x"));
var Ycenter = parseFloat(prompt("Enter y"));
var size = parseFloat(prompt("Enter radius"));

// Defines a path for any regular polygon with the specified number of sides and radius, 
// centered on the provide x and y coordinates.
// optional parameters: startAngle and anticlockwise

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise) {
  if (sides < 3) return;
  var a = (Math.PI * 2)/sides;
  a = anticlockwise?-a:a;
  ctx.save();
  ctx.translate(x,y);
  ctx.rotate(startAngle);
  ctx.moveTo(radius,0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
  }
  ctx.closePath();
  ctx.restore();
}

// Example using the function.
// Define a path in the shape of a pentagon and then fill and stroke it.
context.beginPath();
polygon(context,125,125,100,5,-Math.PI/2);
context.fillStyle="rgba(227,11,93,0.75)";
context.fill();
context.stroke();