我试图通过 Canvas 绘制一个八边形，但无法显示它。
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 拼写错误。
关于javascript - [HTML][Javascript][Canvas] 无法使多边形函数工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48896404/