天天看點

html流星雨頁面,HTML5炫酷流星雨特效

html流星雨頁面,HTML5炫酷流星雨特效

核心代碼區:

//封裝繪制五角星的函數

function drawStar(cxt, r, R, x, 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 };

}

}

}

}

}