HTML5 Ya

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

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>
  <meta charset="UTF-8">

function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.strokeStyle="rgb(255,0,0)";
    lienzo.beginPath();
    lienzo.arc(100,100,50,0,Math.PI,true);
    lienzo.stroke();
    
    lienzo.strokeStyle="rgb(0,255,0)";
    lienzo.beginPath();
    lienzo.arc(100,200,50,0,Math.PI,false);
    lienzo.stroke();
    
    lienzo.fillStyle="rgb(0,0,288)";
    lienzo.beginPath();    
    lienzo.arc(200,100,50,0,Math.PI,true);
    lienzo.fill();
    
    lienzo.fillStyle="rgb(255,255,0)";
    lienzo.beginPath();
    lienzo.arc(200,200,50,0,Math.PI*2,true);
    lienzo.fill();
    
  }
}

</script>

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

11 - CANVAS (arcos rellenos y lineal)

Retornar