Trazados en HTML5
https://engineerdesistemas.blogspot.com/2016/12/trazados-en-html5.html
En el anterior ejercicio se había utilizado por primera vez la etiqueta canvas y se había logrado realizar un dibujo retangular con un color de relleno definido. En esta oportunidad vamos a realizar una tarea adicional en dibujo con HTML5 y nos refirimos a realizar los trazados de línea.
Vamos a dibujar la letra "H" y la letra "O" con trazos de línea y el código es el que sigue:
<!DOCTYPE html>
<html>
<head>
<title>
Trazados en html5
</title>
</head>
<body>
<canvas id="hola" width="130px" height="100px" style="border:1px solid black">
</canvas>
<script >
var c=document.getElementById("hola");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //movemos el puntero al punto x=10, y=10
cxt.lineTo(10,90); //trazamos una linea al punto x=10, y=90
cxt.lineTo(10,50);
cxt.lineTo(30,50);
cxt.lineTo(30,10);
cxt.lineTo(30,90);
cxt.moveTo(40,10); // movemos el puntero al punto x=40, y=10
cxt.lineTo(40,90);
cxt.lineTo(60,90);
cxt.lineTo(60,10);
cxt.lineTo(40,10);
cxt.stroke();
</script>
</body>
</html>
Y el resultado en pantalla es:
