下雪实例知识点：canvas画布数组绘画函数效果：源码：------------------------------ 下雪 *{padding:0;margin:0} html{overflow:hidden} 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 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+")"; }; };
