HTML5的出現為網頁的開發帶來了更加豐富的功能和效果，其中3D效果成為了網頁開發者熱衷的話題之一。今天我們來分享一下HTML5中一個小而精致的3D效果——隧道效果。
下面是一段簡單的HTML5隧道代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Tunnel</title>
<style>
body {
background: #000;
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var rectWidth = 100;
var rectHeight = 100;
var rectVelocity = 1;
var rectPosX = -rectWidth;
var rectPosY = canvas.height / 2 - rectHeight / 2;
function drawRect() {
ctx.save();
ctx.fillStyle = "red";
ctx.fillRect(rectPosX, rectPosY, rectWidth, rectHeight);
ctx.restore();
}
function update() {
rectPosX += rectVelocity;
if (rectPosX >canvas.width) {
rectPosX = -rectWidth;
}
}
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRect();
for (var i = 0; i < 20; i++) {
ctx.save();
var distance = i * 100;
var scale = 1 / (1 + distance * 0.01);
var alpha = 1 - distance / 2000;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.scale(scale, scale);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
ctx.beginPath();
ctx.globalAlpha = alpha;
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.clip();
drawRect();
ctx.restore();
update();
}
requestAnimationFrame(render);
}
render();
}
</script>
</body>
</html>下一篇html53d迷宮代碼