一个酷炫的HTML页面的代码，一个基于HTML5 Canvas实现的预加载动画效果
以下是一个HTML页面的代码实例，它展示了如何使用HTML5 Canvas创建一个简单的预载动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Preloader Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
canvas {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="preloader"></canvas>
<script>
const canvas = document.getElementById('preloader');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
// Utility function to get a random number
function rand(min, max) {
return Math.random() * (max - min) + min;
}
// Utility function to draw a circle
function drawCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, width, height); // Clear canvas
const numCircles = 5; // Number of circles to draw
for (let i = 0; i < numCircles; i++) {
const x = rand(0, width);
const y = rand(0, height);
const radius = rand(10, 50);
drawCircle(x, y, radius);
}
requestAnimationFrame(animate); // Repeat animation
}
// Start the animation
animate();
</script>
</body>
</html>这段代码使用了HTML5 <canvas> 元素来创建一个简单的动画预载器。它定义了一个rand函数来生成随机数，并使用drawCircle函数在画布上绘制圆形。animate函数会在每一帧清除画布并重绘随机的圆形，从而形成动态的预载动画。
评论已关闭