使用canvas实现雪花飘动效果的示例代码HTML5 canvas实现雪花飘落特效html5的canvas实现3d雪花飘舞效果

 //首先找到元素 var c=document.getElementById("myCanvas"); //然后创建context对象 var ctx=c.getContext("2d"); //下面的两行代码绘制一个红色的矩形： ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 

 arc(x,y,r,start,stop) 

 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); 

 var canvas =document.getElementById("canvas") //参数 contextID 指定了您想要在画布上绘制的类型。 //当前唯一的合法值是 "2d"，它指定了二维绘图， //并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 var context = canvas.getContext("2d") var w =window.innerWidth var h =window.innerHeight canvas.width = w; canvas.height =h;

 var count =200 //雪花的个数 var snows=[] //雪花对象数组 for (var i=0 ; i< count;i++){ snows.push({ x:Math.random()*w,//Math.random()用于生成0～1的随机数 y:Math.random()*h, r:Math.random()*5, }) }

 function draw(){ context.clearRect(0,0,w,h) context.beginPath() for(var i=0; i

 function move(){ for (var i=0;ih){ snows[i]={ x:Math.random()*w, y:Math.random()*h, r:Math.random()*5, } } } }

 draw() //每毫秒刷新一次 setInterval(draw,1)