Capítulo 4

Canvas - Exemplo 28: Animação.

Adaptado de um exemplo retirado das especificações para a HTML5

Conteúdo alternativo para navegadores que não suportam canvas.

JavaScript

<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d'); 
 var lastX = ctx.canvas.width * Math.random();
 var lastY = ctx.canvas.height * Math.random();
 var hue = 0;
 function line() {
   ctx.save();
   ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
   ctx.scale(0.9, 0.9);
   ctx.translate(-ctx.canvas.width/2, -ctx.canvas.height/2);
   ctx.beginPath();
   ctx.lineWidth = 2 + Math.random() * 10;
   ctx.moveTo(lastX, lastY);
   lastX = ctx.canvas.width * Math.random();
   lastY = ctx.canvas.height * Math.random();

   ctx.arc(ctx.canvas.width * Math.random(),
                ctx.canvas.height * Math.random(),
                Math.random() * 30,
                0, 2*Math.PI,
				true);
   
   hue = hue + 10 * Math.random();
   ctx.fillStyle = 'hsl(' + hue + ', 50%, 50%)';
   ctx.shadowColor = 'white';
   ctx.shadowBlur = 5;
   ctx.fill();
   ctx.restore();
 }
 setInterval(line, 50);

 function blank() {
   ctx.fillStyle = 'rgba(0,0,0,0.1)';
   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 }
 setInterval(blank, 40);
</script>

CSS

	canvas {border:2px solid #ff0;}

HTML

	<canvas id="quadro" width="400" height="200">
		<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
	</canvas>