HTML5炫酷流星雨特效

演示地址： http://sipeng.net/yanshi/stars/snows.html

核心代码区：

//封装绘制五角星的函数
function drawStar(cxt, r, R, x, y, rot) {
    /*
        cxt: 绘制的上下文环境
          r: 内圆的半径
          R: 外圆的半径
          x: 五角星的中心点距离X轴的坐标位置
          y: 五角星的中心点距离Y轴的坐标位置
          rot: 五角星的旋转角度 
    */
    cxt.beginPath();
    for (var i = 0; i < 5; i++) {
        cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
            -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y);

        cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
            -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);
    }
    cxt.closePath();
    cxt.lineWidth = 3;//星星边框
    cxt.strokeStyle = randomColor();//星星边框颜色
    cxt.fillStyle = "#ffff40";//星星填充颜色
    cxt.stroke();//绘制边框
    cxt.fill();//填充颜色
}


//星星自由落体函数
var angle = 0;
function xxposi() {
    angle += 0.01;
    for (var i = 0; i < snowNum; i++) {
        var p = initPosi[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 > winWid + 5 || p.x < -5 || p.y > winHei) {
            if (i % 4 > 0) {
                initPosi[i] = { x: Math.random() * winWid, y: -10, r: p.r, d: p.d };
            } else {
                //控制方向
                if (Math.sin(angle) > 0) {
                    initPosi[i] = { x: -5, y: Math.random() * winHei, r: p.r, d: p.d };
                } else {
                    initPosi[i] = { x: winWid + 5, y: Math.random() * winHei, r: p.r, d: p.d };
                }
            }
        }
    }
}