html5粒子形成图案,html5 canvas粒子形成下雪背景的效果

本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

canvas粒子形成下雪背景

body{

margin: 0px;

padding: 0px;

}

#canvas{

display: block;

background: #222;

}

var canvas = document.getElementById("canvas");//获取canvas

var ctx = canvas.getContext("2d");//创建画笔

var w = canvas.width = window.innerWidth;//浏览器宽度

var h = canvas.height = window.innerHeight;//浏览器高度

window.onresize = function(){

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

};//当浏览器刷新的时候刷新

var num = 1000;//数量

var shuju = [];//空数组

for(i = 0;i

shuju.push({//数组末项添加

x : Math.random()*w,

y : Math.random()*h,

r : Math.random()*2

});

draw(shuju[i].x,shuju[i].y,shuju[i].r)//for循环循环darw function

};

console.log(shuju[0]);

function draw(x1,y1,r1){

ctx.beginPath();//开始绘画

ctx.fillStyle = "#fff";//颜色

ctx.arc(x1,y1,r1,0,2*Math.PI,false)//arc园

ctx.fill();//填充

}

function chageY(){

for(var i = 0;i

shuju[i].y = Math.random()*5;

if(shuju[i].y > h){//大于高度

shuju[i].y = 0;//等于0

}

draw(shuju[i].x,shuju[i].y,shuju[i].r);//调取

}

}

setInterval(function(){

ctx.clearRect(0,0,w,h);//清楚画布 0 0 高度 宽度

chageY();

},10);

相关推荐：

HTML5超逼真下雪场景效果

HTML5 Canvas打造超梦幻网页背景特效