Author: | enxaneta |
---|---|
Views Total: | 1,796 views |
Official Page: | Go to website |
Last Update: | July 20, 2015 |
License: | MIT |
Preview:

Description:
Draws animated rainbow text on a canvas element using html5 canvas 2D API and Javascript requestAnimationFrame method.
How to use it:
Create an html5 canvas element on your html page.
<canvas id="demo"></canvas>
The requestAnimationFrame polyfill.
(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); }; }());
Config the rainbow text.
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 = "CSSSCRIPT"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "120px Arial black"; ctx.lineWidth = 2; ctx.strokeStyle = "#555"; ctx.fillStyle = "rgb(0,0,0)";
The JavaScript to create animated particles for the text background.
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(); } }
Draw the text on the canvas element.
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); }