这段JavaScript代码创建了一个在窗口加载后运行的动画，生成了飘落的雪花效果。通过使用canvas元素，它利用了2D渲染上下文来绘制和更新多片随机大小和位置的雪花。每片雪花的位置和速度都是动态变化的，当雪花离开画布时，它们会从顶部重新出现，营造出连续飘雪的视觉体验。
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
window.onload = function() {
var canvas = document.getElementById("snowcanvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var mp = 50;
var particles = [];
for (var i = 0; i < mp; i++) {
particles.push({
x: Math.random() * W,
y: Math.random() * H,
r: Math.random() * 4 + 1,
d: Math.random() * mp
})
}
function draw() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for (var i = 0; i < mp; i++) {
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
}
ctx.fill();
update();
}
var angle = 0;
function update() {
angle += 0.01;
for (var i = 0; i < mp; i++) {
var p = particles[i];
p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
p.x += Math.sin(angle) * 2;
if (p.x > W + 5 || p.x < -5 || p.y > H) {
if (i % 3 > 0) {
particles[i] = {
x: Math.random() * W,
y: -10,
r: p.r,
d: p.d
};
} else {
if (Math.sin(angle) > 0) {
particles[i] = {
x: -5,
y: Math.random() * H,
r: p.r,
d: p.d
};
} else {
particles[i] = {
x: W + 5,
y: Math.random() * H,
r: p.r,
d: p.d
};
}
}
}
}
}
setInterval(draw, 25);
}
2674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
