码迷,mamicode.com
首页 > Web开发 > 详细

html5漂亮的雪花

时间:2016-06-24 09:17:37      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

代码来源于潭州免费java视频教程
<!
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>雪花</title> <style type="text/css"> *{margin:0;padding:0;} body{overflow:hidden;background:url("snow2.jpg")no-repeat;background-size:cover;} </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> //取得画板 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //ctx.beginPath(); //ctx.lineWidth=1;//线条粗细 //ctx.strokeStyle="red";//线条颜色 //ctx.arc(100,100,30,0,Math.PI*2);//ctx.arc(x,y,r,startangle,endangle); //ctx.stroke(); var screen=window.screen;//取得窗口屏幕 var w=screen.width; var h=screen.height; canvas.width=w; canvas.height=h; var numberofsnow=200;//雪球个数 var snow=[]; for(var i=0;i<numberofsnow;i++){ snow.push({ x:Math.random()*w, y:Math.random()*h, r:Math.random()*5 }) } function draw(){ ctx.shadowColor="#fff";//阴影颜色,白色让雪球发光 ctx.shadowBlur=10;//阴影模糊级数,越高越模糊 ctx.clearRect(0,0,w,h);//清除画布 ctx.fillStyle="#fff";//randomColor();//填充色 ctx.strokeStyle="rgba(255,255,255,0.5)";//线条颜色,0.5是alpha透明度 ctx.beginPath(); for(var i=0;i<numberofsnow;i++){ var p=snow[i]; ctx.moveTo(p.x,p.y); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); } ctx.fill(); ctx.stroke(); update(); } draw(); function update(){ for(var i=0;i<numberofsnow;i++){ var p=snow[i]; p.y+=Math.random()*10; if (p.y>h){ p.y=0; } } } setInterval(draw,100); function randomColor(){//雪花动态变色 var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); var rgb="rgb("+r+","+g+","+b+")"; return rgb; } </script> </body> </html>

 

技术分享

 

html5漂亮的雪花

标签:

原文地址:http://www.cnblogs.com/tianyang01/p/5612995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!