[HTML] [Javascript] [Canvas]无法启用多边形功能

Question

I'm trying to draw an octagon via canvas but can't get it to display. 我正在尝试通过画布绘制一个八边形，但无法显示它。

HTML: 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: 使用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();
}

I assume I'm missing something, but I haven't got a clue as to what it is. 我以为我想念什么，但是我什么都不知道。

Answer 1

Here you go: 干得好：

 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>

There were commas when defining new variables with var , they were replaced by ; 用var定义新变量时用逗号代替; . 。 There are several mispelled ctx . ctx有几个拼写错误的内容。

[HTML] [Javascript] [Canvas]无法启用多边形功能

问题描述

1 个解决方案

解决方案1
1 2018-02-21 02:36:57

[HTML] [Javascript] [Canvas]无法启用多边形功能

问题描述

1 个解决方案

解决方案1 1 2018-02-21 02:36:57

解决方案1
1 2018-02-21 02:36:57