[HTML][Javascript][Canvas] 无法使用多边形功能答案

【问题标题】：[HTML][Javascript][Canvas] Can't get polygon function to work[HTML][Javascript][Canvas] 无法使用多边形功能
【发布时间】：2018-02-21 00:27:26
【问题描述】：

我正在尝试通过画布绘制八边形，但无法显示。

HTML：

<html>

<head>
  <script src="lab5.js"> </script>
  <title> Lab 5 </title>
</head>

<body onload="drawing1(); drawing2(); drawing3();">
  <h1> Canvas </h1>
  <canvas id="drawingSurface1" width="700" height="500" style="border:1px solid #000000;">
  </canvas>
  <canvas id="drawingSurface2" width="350" height="500" style="border:1px solid #000000;">
  </canvas>
  <canvas id="drawingSurface3" width="350" height="500" style="border:1px solid #000000;">
  </canvas>
</body>

</html>

Javascript：

// drawing 3

function drawing3() {
  var drawingSurface=document.getElementById("drawingSurface3");
  var ctx = drawingSurface.getContext("2d");
  var numberOfSides = 8,
  var size = 20,
  var Xcenter = 50,
  var Ycenter = 50;

  ctx.fillstyle="black"
  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.stroke();
}

我想我错过了什么，但我不知道它是什么。

【问题讨论】：

标签： javascript html canvas shapes polygons

【解决方案1】：

给你：

function drawing3() {
  var drawingSurface=document.getElementById("drawingSurface3");
  var ctx = drawingSurface.getContext("2d");
  var numberOfSides = 8;
  var size = 20;
  var Xcenter = 50;
  var Ycenter = 50;

  ctx.fillstyle="black"
  ctx.beginPath();
  ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));

  for (var i = 1; i <= numberOfSides;i += 1) {
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
  }

  ctx.stroke();
}

<!DOCTYPE html>
<html>
<head>
	<title> Lab 5 </title>
	<script type="text/javascript" src="test.js"></script>
</head>

<body onload="drawing3()">
  <h1> Canvas </h1>
  <canvas id="drawingSurface1" width="700" height="500" style="border:1px solid #000000;">
  </canvas>
  <canvas id="drawingSurface2" width="350" height="500" style="border:1px solid #000000;">
  </canvas>
  <canvas id="drawingSurface3" width="350" height="500" style="border:1px solid #000000;">
  </canvas>
</body>

</html>

用var定义新变量时有逗号，它们被;替换。有几个拼写错误的ctx。

【讨论】：