html绘制简单线性五角星,画布为500*500
时间: 2023-11-28 10:49:58 浏览: 67
可以使用HTML5的canvas标签来绘制简单的五角星。以下是一个绘制五角星的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>绘制五角星</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="star" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("star");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(316, 200);
ctx.lineTo(475, 212);
ctx.lineTo(357, 318);
ctx.lineTo(399, 475);
ctx.lineTo(250, 400);
ctx.lineTo(101, 475);
ctx.lineTo(143, 318);
ctx.lineTo(25, 212);
ctx.lineTo(184, 200);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
```
在这个示例中,我们使用了canvas标签创建了一个500x500的画布,并且使用了JavaScript的Canvas API来绘制五角星。首先,我们使用`beginPath()`方法开始一个新的路径,然后使用`moveTo()`方法移动画笔到五角星的第一个点(x坐标为250,y坐标为50)。接着,我们使用`lineTo()`方法连接五角星的每一个点,最后使用`closePath()`方法闭合路径并用`stroke()`方法绘制出线条。
阅读全文