html可调节3d旋转,HTML5/Canvas 可调整体积和旋转方向的3D霓虹灯球

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

var $;

var rad = 0;

var num = 700;

var size = 15;

var len = 0;

var arr = [];

var midX;

var midY;

var msX = 0;

var msY = 0;

var w;

var h;

window.onload = function() {

var c = document.getElementById("canv");

w = c.width = window.innerWidth;

h = c.height = window.innerHeight;

$ = c.getContext("2d");

midX = c.width / 2;

midY = c.height / 2;

rad = c.height;

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

arr[i] = new Part();

}

$.fillStyle = "hsla(217, 35%, 15%, 1)";

$.fillRect(0, 0, c.width, c.height);

len = h / 2;

window.addEventListener("mousemove", msmv, false);

window.addEventListener("touchmove", tcmv, false);

window.addEventListener('load', resize);

window.addEventListener('resize', resize, false);

window.requestAnimFrame(setInterval(go, 45));

}

function resize() {

c.width = w = window.innerWidth;

c.height = h = window.innerHeight;

c.style.position = 'absolute';

c.style.left = (window.innerWidth - w) *

.01 + 'px';

c.style.top = (window.innerHeight - h) *

.01 + 'px';

}

function msmv(e) {

var rect = e.target.getBoundingClientRect();

msX = e.clientX - rect.left;

msY = e.clientY - rect.top;

}

function tcmv(e) {

var rect = e.target.getBoundingClientRect();

msX = e.touches[0].pageX - rect.left;

msY = e.touches[0].pageY - rect.top;

}

function disp(p1, p2) {

return (p2.z - p1.z);

}

function go() {

$.globalCompositeOperation = 'source-over';

$.fillStyle = "hsla(217, 35%, 5%, .8)";

$.fillRect(0, 0, w, h);

$.globalCompositeOperation = 'lighter';

arr.sort(disp);

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

arr[i].upd();

arr[i].draw();

}

}

var rndCol = function() {

var r = Math.floor(Math.random() * 180);

var g = Math.floor(Math.random() * 60);

var b = Math.floor(Math.random() * 100);

return "rgb(" + r + "," + g + "," + b + ")";

}

var Part = function() {

this.x = 0;

this.y = 0;

this.z = 0;

this.vx = 0;

this.vy = 0;

this.dx = Math.random() * Math.PI;

this.dy = 0;

this.phi = Math.random() * Math.PI * 2;

this.t = Math.random() * Math.PI;

if (Math.random() < 0.5) {

this.col = rndCol();

this.dir = 1;

} else {

this.col = rndCol();

this.dir = -1;

}

}

Part.prototype.draw = function() {

var s = this.scale();

var x = w / 2 + this.x * s;

var y = h / 2 + this.y * s;

$.fillStyle = this.col;

if (this.z > -rad / 2) {

$.beginPath();

$.arc(x, y, Math.ceil(size * s), 0, Math.PI * 2, false);

$.fill();

}

}

Part.prototype.scale = function() {

return (len / (len + this.z));

}

Part.prototype.upd = function() {

var m = (w / 2 - msX) / w / 10;

this.phi += (this.dy + m) * this.dir;

this.t = this.dx;

this.x = rad * Math.sin(this.t) * Math.cos(this.phi);

this.y = rad * Math.cos(this.t);

this.z = rad * Math.sin(this.t) * Math.sin(this.phi) +

rad / 2 * (h / 1.2 - msY) / h * 4;

}