HTML5 Ya

pagina.html
estilos.css
Ejecución de la página

<!DOCTYPE HTML>
<html>
<head>

function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
  lienzo.save();
  var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
  gradiente1.addColorStop(0,"rgb(255,0,0)");
  gradiente1.addColorStop(1,"rgb(0,0,255)");
  lienzo.fillStyle=gradiente1;
  lienzo.fillRect(x,y,ancho,alto);
  lienzo.restore();
}

function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.fillStyle="rgb(255,0,0)";
    lienzo.fillRect(10,30,30,30);
    dibujarCuadradoGradiente(lienzo,70,30,30,30);
    lienzo.fillRect(130,30,30,30);
  }
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>

</html>

22 - CANVAS (grabar y recuper el estado - save(), restore())

Retornar