用html5如何编写星球运动,使用HTML5里的Canvas标签构建粒子星球

this.blue = blue;

this.alpha = alpha;

}

var partNum = 1000;

var zMax = (canvas.width + canvas.height) / 10;

var zMin = -zMax;

function size() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

}

function bg() {

ctx.fillStyle = "rgb(40,40,40)";

ctx.fillRect(0, 0, canvas.width, canvas.height);

}

function init() {

for (var i = 0; i < partNum; i++) {

var angle = Math.random() * (2 * Math.PI),

angleZ = Math.random() * (2 * Math.PI),

x = (canvas.width / 2) + range * s(angle),

y = (canvas.height / 2) + range * Math.sin(angle),

z = Math.random() * zMax,

range = zMax / 2,

angVel = Math.random() * (Math.PI / 720),

angVelZ = Math.random() * (Math.PI / 720),

r = 3 * (z / zMax) + .5,

red = und(Math.random() * 155 + 100),

green = und(Math.random() * 155 + 100),

blue = und(Math.random() * 155 + 100),

alpha = (Math.abs(z / zMax));

P.push(new part(angle, angleZ, x, y, z, range, angVel, angVelZ, r, red, green, blue, alpha));

}

}

function move(p) {

// i really have no idea of what i'm doing here, lol

// if anyone knows how to align the particles in z axis

// so that this thing actually look like a sphere,

// please help me a bit!

var dz = (zMax - p.z);

p.angle += p.angVel;

p.angleZ += p.angVelZ;

p.x = (canvas.width / 2) + p.range * Math.sin(p.angle);

p.y = (canvas.height / 2) + p.range * s(p.angle);

p.z = (zMax) * s(p.angleZ);

p.range = 220 * (dz / zMax) * Math.sin(p.angleZ);

p.r = dz / 50 + 1;

p.alpha = und(100 * (p.r / 3)) / 100;

}

function drawParts() {

var p;

for (var i = 0; i < P.length; i++) {

p = P[i];

ctx.fillStyle = "rgba(" + p.red + "," + p.green + "," + p.blue + "," + p.alpha + ")";

ctx.beginPath();

ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI);

ctx.fill();

move(p);

}

}

function loop() {

bg();

drawParts();

requestAnimFrame(loop);

}