canvas diagrama

by cesar nieto

HTML

<canvas id="myCanvas" width="450" height="750"
           style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>

JavaScript

var contexto = document.querySelector("#myCanvas").getContext('2d');

// circulo
contexto.beginPath();
contexto.fillStyle = "red";
contexto.strokeStyle="black";
contexto.arc(50, 75, 30, 0, 2 * Math.PI, false);
contexto.fill();
contexto.stroke();
contexto.closePath();

// linea
contexto.beginPath(); // Inicializamos una ruta
contexto.lineCap = "square";
//contexto_canvas_1.strokeStyle="black";
contexto.moveTo(80, 75); // Nos situamos al principio de una línea
contexto.lineTo(150, 75); // Trazamos la línea
contexto.closePath();
contexto.stroke();

// dos curvas bezier, en forma de letra ese 
contexto.beginPath();
contexto.fillStyle = '#2E3FAF';
contexto.moveTo(150,25);
contexto.lineTo(150,125);
contexto.bezierCurveTo(150,125,180,130,190,125);
contexto.bezierCurveTo(190,125,230,105,300,105);
contexto.lineTo(300,25);
contexto.lineTo(200,25);
contexto.closePath();
contexto.fill();

contexto.font = "18px Helvetica";
contexto.fillStyle = "#000";
contexto.fillText("C100 etapa 1", 170, 58);
contexto.closePath();

// linea
contexto.beginPath();
contexto.lineCap = "square";
contexto.moveTo(230, 111); // Nos situamos al principio de una línea
contexto.lineTo(230, 160); // Trazamos la línea
contexto.closePath();
contexto.stroke();

// linea 
contexto.beginPath(); // Inicializamos una ruta
contexto.lineCap = "square";
//contexto_canvas_1.strokeStyle="black";
contexto.moveTo(300, 75); // Nos situamos al principio de una línea
contexto.lineTo(350, 75); // Trazamos la línea
contexto.closePath();
contexto.stroke();

// linea
contexto.beginPath(); // Inicializamos una ruta
contexto.lineCap = "square";
//contexto_canvas_1.strokeStyle="black";
contexto.moveTo(260, 210); // Nos situamos al principio de una línea
contexto.lineTo(350, 210); // Trazamos la línea
contexto.closePath();
contexto.stroke();

// linea
contexto.beginPath(); // Inicializamos una ruta
contexto.lineCap = "square";
//contexto_canvas_1.strokeStyle="black";
contexto.moveTo(350, 210); // Nos situamos al principio de...