Canvas: Gradient & Image

Das erste HTML5-Demo zeigt, wie man ein Bild unter einen Farbverlauf legt und per Maus die Bewegung gesteuert wird. Als erstes wird der Canvas eingerichtet, in Javascript holt man sich als Variable Canvas und Body.

var canvas = document.getElementsByTagName('canvas')[0],
    body = document.getElementsByTagName('body')[0],
    width = window.innerWidth, //fensterbreite
    height = window.innerHeight; //fensterhöhe

Den Canvas auf die Größe des Bildes erweitern und das Bild zeichnen.

 img = new Image();
   img.src = ‘/img/logo.jpg’;
   canvas.width = width;
   canvas.height = height;


  ctx = canvas.getContext(‘2d’);
  ctx.clearRect(0, 0, width, height);
  ctx.save();

  ctx.drawImage(img,0,0,width,height);
  ctx.save();

Das Mausevent abfangen und Variablen setzen.

  body.onmousemove = function (event) {
    var x = event.clientX, 
        y = event.clientY,
        rx = img.width * x / width,
        ry = img.width * y / width;
        ctx.globalAlpha = 0.5;
    var xc = ~~(256 * x / width);
    var yc = ~~(256 * y / height);

Der Farbverlauf wird erzeugt, erst das Bild gezeichnet und danach von dem Verlauf überlagert.

grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
    grad.addColorStop(0, 'transparent');
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
    ctx.fillStyle = grad;
    ctx.drawImage(img,0,0,width,height);
    ctx.fillRect(0,0,width,height);
  };
}
</script>
</body>
</html>

Hier ein kleines Demo und der komplette Source

(getestet bisher nur in Firefox 3.5)