JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 600,
cx = cw / 2;
var ch = canvas.height = 600,
cy = ch / 2;
var fotogramas = 0;
var rad = Math.PI / 180;
var numMarietes = 10;
var marietesRy = [];
var fl = 250; // enfoque a 250 distancia
var arriba = cy - 200;
var abajo = cy + 200;
var izquierda = cx - 200;
var derecha = cx + 200;
// Marieta
function Marieta() {
this.R = randomIntFromInterval(10, 20);
this.boundary = 1.5 * this.R;
this.a = randomIntFromInterval(0, 360) * rad;
this.delta = .025;
this.x = randomIntFromInterval(izquierda, derecha);
this.y = randomIntFromInterval(arriba, abajo);
this.z = randomIntFromInterval(0, 350) - 150;
this.vx = randomIntFromInterval(5, 10) / 10;
this.vy = randomIntFromInterval(5, 10) / 10;
this.vz = randomIntFromInterval(5, 10) / 10;
this.scaleX = 1;
this.scaleY = 1;
}
Marieta.prototype.dibujar = function(ctx) {
ctx.save();
ctx.translate(this.x, this.y);
//ctx.rotate(.1);
ctx.scale(this.scaleX, this.scaleY);
//body
ctx.beginPath();
ctx.arc(0, 0, .8 * this.R, this.a, this.a + 2 * Math.PI);
ctx.fill();
//head
var head = {
x: .8 * this.R * Math.cos(this.a),
y: .8 * this.R * Math.sin(this.a),
r: this.R / 2
};
ctx.beginPath();
ctx.arc(head.x, head.y, head.r, 0, 2 * Math.PI);
ctx.fill();
//antennae
ctx.lineWidth = this.R / 10;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(1.5 * this.R * Math.cos(this.a - .1), this.boundary * Math.sin(this.a - .1));
ctx.moveTo(0, 0);
ctx.lineTo(1.5 * this.R * Math.cos(this.a + .1), this.boundary * Math.sin(this.a + .1));
ctx.stroke();
// wings
ctx.fillStyle = Grd(0, 0, this.R, 0);
ctx.beginPath();
ctx.arc(0, 0, this.R, this.a + this.delta, this.a + Math.PI - this.delta);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(0, 0, this.R, this.a + this.delta + Math.PI, this.a - this.delta);
ctx.closePath();
ctx.fill();
// spots
var num = 1;
ctx.fillStyle = "#000";
for (var i = this.a + 30 * rad; i < this.a + 360 * rad; i += 60 * rad) {
num++
if (num % 3 == 0) {
r = this.R / 6;
dist = .6 * this.R
} else {
r = this.R / 10;
dist = .7 * this.R
}
ctx.beginPath();
ctx.arc(dist * Math.cos(i), dist * Math.sin(i), r, 0, 2 * Math.PI);
ctx.fill();
}
ctx.restore();
}
for (var i = 0; i < numMarietes; i++) {
var marieta = new Marieta();
marietesRy.push(marieta);
}
function Animacion() {
elId = window.requestAnimationFrame(Animacion);
fotogramas += .5;
ctx.clearRect(0, 0, cw, ch);
//marietesRy.sort(zSort);
marietesRy.forEach(function(o) {
o.a += .01;
o.x = cx + 10 * o.R * Math.cos(fotogramas * rad + o.a);
o.y = cy - 5 * o.R * Math.sin(fotogramas * rad + o.a);
o.z = 10 * o.R * Math.sin(fotogramas * rad + o.a);
///
var scale = fl / (fl + o.z);
o.scaleX = o.scaleY = scale;
///
});
marietesRy.forEach(function(o) {
o.dibujar(ctx);
});
}
elId = window.requestAnimationFrame(Animacion);
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn);
}
function Grd(x, y, r, hue) {
grd = ctx.createRadialGradient(x - .2 * r, y - .6 * r, 0, x - .2 * r, y - .6 * r, r);
grd.addColorStop(0, 'hsl(' + hue + ',60%,' + 90 + '%)');
grd.addColorStop(0.6, 'hsl(' + hue + ',70%,' + 50 + '%)');
grd.addColorStop(1, 'hsl(' + hue + ',90%,40%)');
return grd;
}
function zSort(a, b) {
//para que los elementos más alejados sean dibujados debajo de los que estan delante
return (b.z - a.z);
}