html页⾯下雪动画实例,HTML5实现下雪实例下雪实例
知识点：
canvas画布
数组
绘画函数
效果：
源码：
------------------------------
html>
下雪
*{padding:0;margin:0}
html{overflow:hidden}
//获取画布对象
var canvas = ElementById("canvas");
//获取画布的上下⽂
var context =Context("2d");
//获取浏览器屏幕的宽度和⾼度
var w = window.innerWidth;
var h = window.innerHeight;
//设置canvas的宽度和⾼度
canvas.width = w;
canvas.height = h;
//1：如何产⽣雪花,⼀个圆 ,arc(x,y,r,start,end)
//初始化雪花数量
var num = 200;
//雪花数组
var snows = [];
for(var i=0;i
//x,y圆⼼掉的坐标位置，r代表圆的半径，d每个圆的每个圆之间的间距，c代表的颜⾊
var r = randColor();
snows.push({
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*10,
d:Math.random()*num
});
};
//绘画的函数
function draw(){
context.clearRect(0,0,w,h);
context.beginPath();
for(var i=0;i
var snow = snows[i];
context.fillStyle = "rgba(255,255,255,0.9)";
context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
}
context.fill();
//掉落
drop();
};
var angle = 0;
function drop()
canvas动画{
angle += 0.01;
for(var i = 0; i
var p = snows[i];
//记住两个公式：Math.sin(弧度)返回是⼀个0 1 -1 的数字//s(1 0 -1 ) ⾃由体，
p.y += s(angle+p.d) + 1 + p.r*0.625;
p.x += Math.sin(angle) * 8 ;
//如果雪花到了边界，进⾏边界处理
if(p.x > w+5 || p.x  h){
if(i%4 > 0) {
snows[i] = {x: Math.random()*w, y: -10, r: p.r, d: p.d}; }else{
//控制⽅向
if(Math.sin(angle) > 0){
snows[i] = {x: -5, y: Math.random()*h, r: p.r, d: p.d}; }else{
snows[i] = {x: w+5, y: Math.random()*h, r: p.r, d: p.d}; }
}
}
}
};
//执⾏和调⽤函数
draw();
setInterval(draw,10);
//随机颜⾊
function randColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
};
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。