html5 画隧道示例
时间: 2023-07-07 12:32:06 浏览: 58
下是一个 HTML5 画隧道的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 画隧道示例</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取画布和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 设置隧道半径和长度
var radius = 50;
var length = 600;
// 设置颜色渐变
var gradient = ctx.createLinearGradient(0, 0, 0, length);
gradient.addColorStop(0, '#ff0');
gradient.addColorStop(0.5, '#f00');
gradient.addColorStop(1, '#00f');
// 初始化位置和速度
var position = 0;
var velocity = 0.1;
// 绘制隧道
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 保存画布状态
ctx.save();
// 移动画布原点到屏幕中心
ctx.translate(canvas.width / 2, canvas.height / 2);
// 绘制隧道
ctx.beginPath();
ctx.moveTo(0, 0);
for (var i = 0; i < length; i++) {
var angle = i / length * Math.PI * 2;
var x = Math.sin(angle) * (radius + position);
var y = Math.cos(angle) * (radius + position);
ctx.lineTo(x, y);
}
ctx.lineWidth = 2;
ctx.strokeStyle = gradient;
ctx.stroke();
// 恢复画布状态
ctx.restore();
// 更新位置
position += velocity;
// 循环播放
if (position > length / 2) {
position -= length / 2;
}
// 递归调用
requestAnimationFrame(draw);
}
// 开始绘制隧道
draw();
</script>
</body>
</html>
```
在上面的示例中,我们使用了 canvas 元素和 2D 上下文绘制了一个隧道。隧道由多个圆弧组成,随着时间的推移,圆弧的半径和位置不断变化,从而形成了一个动态的隧道效果。同时,我们还使用了颜色渐变,使隧道看起来更加鲜艳、夺目。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_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)