HTML5画布绘制实心圆、三角形、五边形、五角星
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 实心圆
ctx.beginPath();
ctx.arc(70, 40, 35, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
// 三角形
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(150, 10);
ctx.lineTo(125, 30);
ctx.fillStyle = "green";
ctx.fill();
// 五边形
ctx.beginPath();
ctx.moveTo(30, 100);
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * 50 + 60,
-Math.sin((18 + i * 72) * Math.PI / 180) * 50 + 100);
}
ctx.fillStyle = "blue";
ctx.fill();
// 五角星
ctx.beginPath();
ctx.moveTo(120, 10);
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * 80 + 120,
-Math.sin((54 + i * 72) * Math.PI / 180) * 80 + 10);
}
ctx.fillStyle = "yellow";
ctx.fill();
</script>
</body>
</html>这段代码使用HTML5 <canvas> 元素绘制了实心圆、实心三角形、实心五边形和实心五角星。每一个形状的绘制都是通过 beginPath() 方法开始，然后使用 arc() 方法（对于圆形）或者 lineTo() 方法（对于三角形和多边形）来定义路径，最后使用 fill() 方法填充形状。五角星是通过72度旋转五次绘制五条边得到的。
评论已关闭