HTML5写一个简单旋转的大风车的代码
时间: 2023-12-01 09:52:04 浏览: 40
可以使用HTML5中的canvas标签和JavaScript来实现一个简单的旋转大风车效果。
HTML代码:
```
<canvas id="myCanvas"></canvas>
```
JavaScript代码:
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置画布宽高
canvas.width = 400;
canvas.height = 400;
// 绘制大风车
function draw() {
ctx.save(); // 保存当前画布状态
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
// 移动画布原点到画布中心
ctx.translate(canvas.width / 2, canvas.height / 2);
// 绘制大风车叶片
ctx.beginPath();
ctx.moveTo(0, -150);
ctx.lineTo(60, -20);
ctx.lineTo(0, 100);
ctx.lineTo(-60, -20);
ctx.closePath();
ctx.fillStyle = "#FF0000";
ctx.fill();
// 绘制大风车轴
ctx.beginPath();
ctx.moveTo(-10, -150);
ctx.lineTo(10, -150);
ctx.lineTo(10, 150);
ctx.lineTo(-10, 150);
ctx.closePath();
ctx.fillStyle = "#000000";
ctx.fill();
ctx.restore(); // 恢复上一个保存的画布状态
}
// 旋转大风车
var angle = 0;
function rotate() {
angle += 0.1;
ctx.rotate(angle * Math.PI / 180);
draw();
requestAnimationFrame(rotate);
}
rotate();
```
这段代码会在canvas画布中生成一个旋转的大风车,可以根据需要修改风车的大小、颜色、旋转速度等参数。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)