Texto interactivo

Para ponerlo de titulo en el blog, para poner un mensaje o para lo que tu quieras utilizarlo, te voy a enseñar un codigo realizado con Javascript y la etiqueta canvas (HTML5) que te permitira añadir un texto interactivo. Como puedes ver en el ejemplo de aqui abajo, al pasar el cursor alrededor o por encima, este se va moviendo y haciendo 'la ola'. Ademas, cada vez que recargues la pagina aparecerera con un color distinto. Para ponerlo en tu blog o web, tan solo tienes que copiar el codigo y pegarlo alli donde quieras mostrarlo. Donde esta indicado en color rojo, escribes el texto que quieras. Lo que esta en color verde es el tamaño o espacio que ocupa y lo que esta en azul es el tamaño y el tipo de la fuente.

<canvas id="c"></canvas> <script> document.body.clientWidth; with(Math){r=random;f=floor;pi=PI;at=atan2}w=window;a=[];function rn(b){return f(r()*b)}function rc(){return"rgb("+rn(255)+","+rn(255)+","+rn(255)+")"} w.onload=function(){c=document.getElementById("c");c.width=cw=600;c.height=ch=300;o=c.getContext("2d");g=o.createLinearGradient(0,0,cw,70);g.addColorStop(0,rc());g.addColorStop(0.5,rc());o.fillStyle=g;o.font="60px Arial Black";o.fillText("TU TEXTO AQUI",50,200);for(x=0;x<cw;x+=5)for(y=0;y<ch;y+=5){d=o.getImageData(x,y,1,1).data;color="rgb("+d[0]+","+d[1]+","+d[2]+")";d[2]!=0&&a.push({x:x,y:y,c:color})}w.onmousemove=function(b){x=b.clientX;y=b.clientY};setInterval(function(){c.width=cw;for(i=0;i<a.length;i++){o.save(); o.translate(a[i].x,a[i].y);o.rotate(at(x-a[i].x,-(y-a[i].y))*(180/pi)/50);o.fillStyle=a[i].c;o.beginPath();o.moveTo(20,20);o.lineTo(25,20);o.lineTo(20,25);o.fill();o.restore()}},10)};</script>