¿Que es Canvas? Es un (relativamente) nuevo elemento HTML que es usado para realizar graficos dinamicamente por medio de scripts (tales como javascript), graficos estáticos y simples animaciones, entre otras cosas. Digamos en otras palabras que el elemento <canvas> de HTML5 es la solucion para dibujar imágenes e integrarlas perfectamente en el documento, dandole estilo por medio de CSS y programandolas por medio de Javascript (para tener algun tipo de animacion). Es un lenguaje que no domino mucho, pero con el cual se pueden realizar maravillas en el diseño web. Como este pequeño experimento que veis aqui, un rectangulo con colores gradientes que al pasar el cursor sobre el, van cambiando dando un efecto muy chulo.
Y aqui esta el codigo que he utilizado para su realizacion:
<div style="-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background-color:#DFDFDF;border:1px solid #555555;"><center><canvas></canvas></center></div>
<script>
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 600);
ctx.save();
// Create radial gradient
grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#000');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
// assign gradients to fill
ctx.fillStyle = grad;
// draw 600x600 fill
ctx.fillRect(0,0,600,600);
ctx.save();
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / height;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
grad.addColorStop(0, '#000');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
// ctx.restore();
ctx.fillStyle = grad;
ctx.fillRect(0,0,600,600);
// ctx.save();
};
}
</script>
<style>
canvas {
position: relative;
height: 450px;
width: 600px;
}
</style>
