首页 > 代码库 > WEB前端开发学习：源码canvas 雪
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群加入。。。
WEB前端开发学习：源码canvas 雪