HTML5 canvas实现雪花飘落特效

2019-01-28 22:05:15刘景俊
  •             var arr = []; //保存各圆坐标及半径                for (var i = 0; i < snow; i++) {   
  •                 arr.push({                        x: Math.random() * wid,   
  •                     y: Math.random() * hei,                        r: Math.random() * 10 + 1   
  •                 })                }   
  •             //画雪花                function DrawSnow() {   
  •                 ctx.clearRect(0, 0, wid, hei);                    ctx.fillStyle = "white";   
  •                 ctx.beginPath();                    for (var i = 0; i < snow; i++) {   
  •                     var p = arr[i];                        ctx.moveTo(p.x, p.y);   
  •                     ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);                    }   
  •                 ctx.fill();                    SnowFall();