用hbuilder写一个飘雪代码
时间: 2024-06-06 09:10:54 浏览: 13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飘雪代码</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var snowflakes = [];
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function Snowflake() {
this.x = random(0, width);
this.y = random(0, height);
this.radius = random(1, 4);
this.speed = random(1, 3);
this.wind = random(-1, 1);
this.color = '#fff';
}
Snowflake.prototype.update = function() {
this.x += this.wind;
this.y += this.speed;
if (this.y > height) {
this.y = random(-50, -10);
}
}
Snowflake.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
function createSnowflakes(num) {
for (var i = 0; i < num; i++) {
snowflakes.push(new Snowflake());
}
}
function loop() {
ctx.clearRect(0, 0, width, height);
for (var i = 0; i < snowflakes.length; i++) {
snowflakes[i].update();
snowflakes[i].draw();
}
requestAnimationFrame(loop);
}
createSnowflakes(200);
loop();
</script>
</body>
</html>