標籤：lob idt back size padding lib etc 初學者 awb
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 雪
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
