JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
(function(main) {
main(this, document, jQuery, undefined);
})(function(window, document, $) {
var canvas, ctx, dimensions, center,
background, clouds, cloudCount = 100,
transparency = 0.15,
imgData, imgs = [],
totalImgs = 5,
counter = 1,
baseURL = '/codepen/sky/';
var Vector2 = (function() {
function Vector2(x, y) {
this.x = x || 0;
this.y = y || 0;
}
return Vector2;
})();
Vector2.prototype.add = function(vec) {
this.x += vec.x;
this.y += vec.y;
};
var Cloud = (function() {
function Cloud() {
var self = this;
self.ready = false;
self.init();
window.setTimeout(function() {
self.ready = true;
}, Math.random() * 5000);
}
return Cloud;
})();
Cloud.prototype.init = function() {
this.sprite = imgs[Math.floor(Math.random() * imgs.length)];
this.scale = 0.5 + Math.random() * 3;
this.width = this.sprite.width / this.scale;
this.height = this.sprite.height / this.scale;
this.position = new Vector2(-this.width, center.y - this.height / 3 + (200 - Math.random() * 400));
this.velocity = new Vector2(1 + Math.random() * 1, 0);
};
Cloud.prototype.update = function() {
if (this.position.x > dimensions.width || this.x < -this.width || this.position.y < -this.height) {
this.init();
} else {
this.position.add(this.velocity);
this.life++;
}
};
function populate() {
clouds = [];
for (var i = 0; i < cloudCount; i++) {
clouds.push(new Cloud());
}
}
function getImages() {
imgData = [];
$.ajax({
url: baseURL,
dataType: 'json',
success: function(data) {
$.each(data, function(key, value) {
var url = baseURL + 'sprites/' + value,
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
img.onload = function() {
imgs.push(img);
if (counter < totalImgs) {
counter++;
} else {
populate();
loop();
}
}
});
}
});
}
function resize() {
dimensions = {
width: window.innerWidth,
height: window.innerHeight
};
center = new Vector2(
dimensions.width / 2,
dimensions.height / 2
);
canvas.main.width = canvas.os.width = dimensions.width;
canvas.main.height = canvas.os.height = dimensions.height;
background = ctx.os.createLinearGradient(center.x, 0, center.x, dimensions.height);
background.addColorStop(0, '#90caf9');
background.addColorStop(1, '#e3f2fd');
}
function draw() {
ctx.main.fillStyle = background;
ctx.main.fillRect(0, 0, dimensions.width, dimensions.height);
ctx.os.clearRect(0, 0, dimensions.width, dimensions.height);
for (var i = 0; i < cloudCount; i++) {
var cloud = clouds[i];
ctx.os.globalAlpha = transparency;
if (cloud.ready) {
ctx.os.drawImage(cloud.sprite, cloud.position.x, cloud.position.y, cloud.width, cloud.height);
ctx.os.globalCompositeOperation = 'lighter';
ctx.os.drawImage(cloud.sprite, cloud.position.x, cloud.position.y, cloud.width, cloud.height);
ctx.os.globalCompositeOperation = 'difference';
cloud.update();
}
}
ctx.main.drawImage(canvas.os, 0, 0);
}
function loop() {
draw();
window.requestAnimationFrame(loop);
}
window.onresize = resize;
window.onload = function() {
canvas = {
main: document.getElementById('canvas'),
os: document.createElement('canvas')
};
ctx = {
main: canvas.main.getContext('2d'),
os: canvas.os.getContext('2d')
};
resize();
getImages();
};
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
});
