html5 视差地图,HTML5/Canvas 星系视差动效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

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

var $ = c.getContext('2d');

var ŭ = 0

function rndCol(alpha) {

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

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

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

if (alpha) {

return 'rgba(' + r + ',' + g + ',' + b + ',' + '0.95)';

} else {

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

}

}

minmax = function(min, max) {

return Math.random() * (max - min) + min;

}

rndNum = function(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

arr = [];

w = c.width = window.innerWidth;

h = c.height = window.innerHeight;

ms = {};

cam = {

x: 0,

y: 0,

toX: 0,

toY: 0,

camX: 0,

camY: 0

};

y = 0;

cam.x = y;

ms.x = ms.y = ms.msdn = ms.currX = ms.currY = 0;

Gal.prototype = {

galaxy: function() {

this.parallax = minmax(.1, 10)

this.x = rndNum(cam.x * this.parallax, w + (cam.x * this.parallax))

this.y = rndNum(cam.y * this.parallax, h + (cam.y * this.parallax))

this.arr = 0;

this.size = rndNum(1, 5);

this.col = rndCol();

},

msdn: function() {

_x = this.px = this.x - (cam.x * this.parallax * .51)

_y = this.py = this.y - (cam.y * this.parallax * .51)

this.arr += (this.size - this.arr) * .1;

$.fillStyle = this.col;

$.beginPath();

$.arc(_x, _y, this.arr * 2.8, 0, Math.PI * 2);

$.fill();

$.fillStyle = "hsla(255,255%,255%,.75)";

$.beginPath();

$.arc(_x, _y, this.arr * 2, 0, Math.PI * 2);

$.fill();

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

$.beginPath();

$.arc(_x, _y, this.arr * 1.1, 0, Math.PI * 2);

$.fill();

$.fillStyle = "hsla(" + (ŭ % 360) + ",100%,50%,.9)";

$.globalAlpha = .8;

$.beginPath();

$.arc(_x, _y, this.arr, 0, Math.PI * 2);

$.fill();

if (_x > w || _y > h || _x < 0 || _y < 0) {

this.galaxy();

}

}

}

for (i = 0; i < 350; i++) {

arr[i] = new Gal;

parallax = h / 2;

txtPos = w / 2.5;

}

function Gal() {

this.galaxy()

};

function go() {

ŭ -= .5;

$.fillStyle = 'hsla(0,5%,15%,1)';

$.globalAlpha = .78;

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

var t = "PARALLAX".split("").join(String.fromCharCode(0x2004));

$.font = "3em Poiret One";

$.fillStyle = 'hsla(255,255%,255%,.5)';

$.fillText(t, txtPos - cam.x, parallax - cam.y + 5);

if (ms.msdn) {

cam.toX = cam.camX - (ms.x - ms.currX) * 3.5;

cam.toY = cam.camY - (ms.y - ms.currY) * 3.5;

} else {

cam.camX = cam.toX;

cam.camY = cam.toY;

ms.currX = ms.x;

ms.currY = ms.y;

}

cam.x += (cam.toX - cam.x) * 0.2 >> 0;

cam.y += (cam.toY - cam.y) * 0.2 >> 0;

for (i = 0; i < 350; i++) {

gal = arr[i]

gal.msdn();

}

window.requestAnimFrame(go);

}

go()

window.addEventListener('mousedown', function(e) {

ms.msdn = 1;

})

window.addEventListener('mouseup', function(e) {

ms.msdn = 0;

})

window.addEventListener('mousemove', function(e) {

ms.x = e.pageX;

ms.y = e.pageY;

})

window.addEventListener('touchmove', function(e) {

ms.x = e.touches[0].pageX;

ms.y = e.touches[0].pageY;

})

window.addEventListener('touchstart', function(e) {

ms.currX = ms.x;

ms.currY = ms.y;

})

window.addEventListener('touchend', function(e) {

ms.msdn = 0;

})

window.addEventListener('resize', function() {

c.width = w = window.innerWidth;

c.height = h = window.innerHeight;

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

});