WEB前端开发学习：源码canvas 雪

WEB前端开发学习：源码canvas 雪

双旦节要到了，程序员们为了响应气氛，特别用代码制作了动态雪花，WEB前端开发学习的初学者们一起跟着案例做一遍吧！

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body style="overflow: hidden;margin: 0; padding: 0;">

<canvas id="canvas" style="background:url(http://cdn.attach.qdfuns.com/notes/pics/201612/20/141059idgd55hz7mkxpw6m.jpg);background-size:100% 100%;">您的浏览器暂不支持canvas</canvas>

<script>

var canvas=document.getElementById("canvas");

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

var ctx=canvas.getContext("2d");

var balls=[];

function draw(ball){

ctx.beginPath();

ctx.arc(ball.x,ball.y,ball.r,0,2*Math.PI);

ctx.globalAlpha=0.7;

ctx.fillStyle="#ffffff";

ctx.shadowColor="#ffffff";

ctx.shadowBlur=20;

ctx.fill();

}

function star(){

for(var i=0;i<1;i++){

var ball={

x:Math.random()*canvas.width/2+canvas.width/2,

y:0,

r:Math.random()*4,

vx:Math.random()-0.5,

vy:Math.random()+1,

}

balls.push(ball);

}

drawball();

}

function drawball(){

ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<balls.length;i++){

balls[i].x+=balls[i].vx*5;//改变x轴位置

balls[i].y+=balls[i].vy*2;//Y轴

balls[i].index=i;

if(balls[i].y>canvas.height/1.7){

balls.splice(balls[i].index,1);

continue;

}

draw(balls[i]);

}

}

setInterval(function(){

star();

},10);

</script>

</body>

</html>

　　无论你是学生，还是工作，也或者你正在努力找工作，想要在web前端知识领域有所涉入和提高的，有官方平台提供给你互相交流和学习!更多小案例等你来下载，搜web前端学习部落22群加入。。。