[网页][Javascript][帆布]无法使多边形函数正常工作

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

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();
}

我认为我缺少一些东西，但是我对它是什么都不知道。

您去这里：

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。

相关内容

最新更新

热门标签：