html css画瓢虫,CANVAS做的瓢虫在太空漂浮的动画

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);

}