HTML5实现下雪效果的实例代码分享

百变鹏仔 2个月前 (10-18) #H5教程

文章标签实例

下雪实例

知识点：

canvas画布

数组

绘画函数

立即学习“前端免费学习笔记（深入）”；

效果：

源码：

------------------------------

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>下雪</title>  <style>*{padding:0;margin:0}html{overflow:hidden}  </style> </head> <body><canvas id="canvas" style="background:#111"></canvas><audio src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201210/2178.mp3" autoplay loop/><audio src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201205/1430.mp3" autoplay loop/><script type="text/javascript">window.onload = function(){//获取画布对象var canvas = document.getElementById("canvas");//获取画布的上下文var context =canvas.getContext("2d");//获取浏览器屏幕的宽度和高度var w = window.innerWidth;var h = window.innerHeight;//设置canvas的宽度和高度canvas.width = w;canvas.height = h;//1：如何产生雪花,一个圆 ,arc(x,y,r,start,end)//初始化雪花数量var num = 200;//雪花数组var snows = [];for(var i=0;i<num;i++){//x,y圆心掉的坐标位置，r代表圆的半径，d每个圆的每个圆之间的间距，c代表的颜色var r = randColor();snows.push({x:Math.random()*w,y:Math.random()*h,r:Math.random()*10,d:Math.random()*num});};//绘画的函数function draw(){context.clearRect(0,0,w,h);context.beginPath();for(var i=0;i<num;i++){var snow = snows[i];context.fillStyle = "rgba(255,255,255,0.9)";context.moveTo(snow.x,snow.y);context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);}context.fill();//掉落drop();};var angle = 0;function drop(){angle += 0.01;for(var i = 0; i < num; i++){var p = snows[i];//记住两个公式：Math.sin(弧度)返回是一个0 1 -1 的数字//math.cos(1 0 -1 ) 自由体，p.y += Math.cos(angle+p.d) + 1 + p.r*0.625;p.x += Math.sin(angle) * 8 ;//如果雪花到了边界，进行边界处理if(p.x > w+5 || p.x < -5 || p.y > h){if(i%4 > 0) {snows[i] = {x: Math.random()*w, y: -10, r: p.r, d: p.d};}else{//控制方向if(Math.sin(angle) > 0){snows[i] = {x: -5, y: Math.random()*h, r: p.r, d: p.d};}else{snows[i] = {x: w+5, y: Math.random()*h, r: p.r, d: p.d};}}}}};//执行和调用函数draw();setInterval(draw,10);//随机颜色function randColor(){var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return "rgb("+r+","+g+","+b+")";};};</script> </body></html>

文章推荐

HTML5实现下雪效果的实例代码分享

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集