Question

我试图通过画布绘制一个八边形，但无法显示它。

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

我认为我错过了一些东西，但我还没有弄清楚它是什么。

Answer 1

你走了：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

使用var定义新变量时有逗号，它们被;取代。有几个错误的ctx。

[HTML] [Javascript] [Canvas]无法使多边形功能起作用

1 个答案: