Texto animado de Rainbow con JavaScript y Canvas

Vista prévia

Descripción

Dibuja texto animado de arco iris en un elemento de lienzo mediante HTML5 Canvas 2D API y JavaScript requestAnimationFrame método.

Funcionamiento

Cree un elemento canvas de HTML5 en su página HTML.

<canvas id="demo"></canvas>

El polyfill de requestAnimationFrame.

(function() {

var lastTime = 0;

var vendors = ['ms', 'moz', 'webkit', 'o'];

for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {


window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];


window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];

}


if (!window.requestAnimationFrame)


window.requestAnimationFrame = function(callback, element) {



var currTime = new Date().getTime();



var timeToCall = Math.max(0, 16 - (currTime - lastTime));



var id = window.setTimeout(function() {





callback(currTime + timeToCall);




},




timeToCall);



lastTime = currTime + timeToCall;



return id;


};


if (!window.cancelAnimationFrame)


window.cancelAnimationFrame = function(id) {



clearTimeout(id);


};
}());

Configuración del texto del arco iris.

var c = document.getElementById("demo");
var bc = document.createElement("canvas");
var ctx = c.getContext("2d");
var bCtx = bc.getContext("2d");
var cw = c.width = bc.width = 750,


cx = cw / 2;
var ch = c.height = bc.height = 130,


cy = ch / 2;
var rad = Math.PI / 180;
var maxParticles = 60;
var speed = .015;
var text = "WIKICSS";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "120px Arial black";
ctx.lineWidth = 2;
ctx.strokeStyle = "#555";
ctx.fillStyle = "rgb(0,0,0)";

El JavaScript para crear partículas animadas para el fondo de texto.

var particlesRy = new Array();

function particles() {


this.x = Math.round(Math.random() * cw) + 1;

this.y = Math.round(Math.random() * ch) + 1;

this.r = randomIntFromInterval(20, 60)

this.color = "hsl(" + (Math.round(Math.random() * 360) + 1) + ",100%,50%)";

this.pm = Math.random() < 0.5 ? -1 : 1; //plus or minus

this.drift = this.pm * speed;

this.fall = this.pm * speed;
}

function createParticles() {

var l = particlesRy.length

particlesRy[l] = new particles();

bCtx.fillStyle = particlesRy[l].color;

bCtx.beginPath();

bCtx.arc(particlesRy[l].x, particlesRy[l].y, particlesRy[l].r, 0, 2 * Math.PI);

bCtx.fill();
}

function updateParticles() {

bCtx.clearRect(0, 0, cw, ch);

for (var j = 0; j < particlesRy.length; j++) {


if (particlesRy[j].x >= cw || particlesRy[j].x <= 0) {



particlesRy[j].drift = -1 * particlesRy[j].drift;


}


if (particlesRy[j].y >= ch || particlesRy[j].y <= 0) {



particlesRy[j].fall = -1 * particlesRy[j].fall;


}


particlesRy[j].y += particlesRy[j].fall;


particlesRy[j].x += particlesRy[j].drift;



bCtx.fillStyle = particlesRy[j].color;


bCtx.beginPath();


bCtx.arc(particlesRy[j].x, particlesRy[j].y, particlesRy[j].r, 0, 2 * Math.PI);


bCtx.fill();

}

}

Dibuje el texto en el elemento canvas.

window.addEventListener("load", function() {


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


createParticles();


bCtx.globalCompositeOperation = "xor";

}


drawText();


requestId = window.requestAnimationFrame(Draw);

}, false)

function Draw() {

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


updateParticles();


bCtx.globalCompositeOperation = "xor";

}


drawText();


requestId = window.requestAnimationFrame(Draw);
}

function drawText() {

ctx.beginPath();


ctx.fillText(text, cw / 2, ch / 2);

ctx.strokeText(text, cw / 2, ch / 2);


ctx.globalCompositeOperation = "source-atop";


var img = bc;

ctx.drawImage(img, 0, 0);
}

function randomIntFromInterval(mn, mx) {

return ~~(Math.random() * (mx - mn + 1) + mn);
}