Buen día, bienvenidos a este blog de programación, como ya estamos en época Navideña, me gustaría compartirles un ejemplo de como dibujar un Pino y una Corona de Navidad (con imaginación) en un lenguaje que ya vimos previamente que es Javascript.
Para esto vamos a utilizar las etiquetas de Canvas que son soportadas en HTML5 y en los siguientes navegadores, Canvas es un termino para decir que es nuestra área de trabajo o nuestro lienzo donde vamos a dibujar, es soportado en los siguientes Browse:
- Para dibujar un circulo tenemos la función arc que tiene los siguiente parámetros
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
- coordenada x dentro del canvas
- coordenada y dentro del canvas
- Valor del radio
- El angulo inicial
- El angulo final
- Para especificar si es dentro o fuera la función
- Para dibujar un arbolito es mediante líneas y mover sin despejar el lápiz para crear nuestro triángulo
En la siguiente liga esta muy bien explicado como hace el proceso de recorrido
https://www.kirupa.com/html5/drawing_triangles_on_the_canvas.htm
- Luego un rectángulo como base la función rect que tiene los siguientes parámetros:
context.rect(x,y,width,height);
- coordenada x en el canvas
- coordenada y en el canvas
- El valor del largo del rectángulo
- El valor del ancho del rectángulo
Código
<html>
<head>
<title>Especial Navideño Programacionparatodos</title>
</head>
<body>
<p>Una Corona Navideña
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script >
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
var d = document.getElementById("myCanvas2");
var ctx2 = d.getContext("2d");
ctx2.arc(220, 75, 50, 0, 2 * Math.PI, false);
ctx2.fillStyle = 'red';
ctx2.fill();
ctx2.stroke();
</script>
<p>Un pino de navidad
<canvas id="myCanvas3" width="350" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script >
var e = document.getElementById("myCanvas3");
var ctx3 = e.getContext("2d");
ctx3.fillStyle = "#FFCC00";
ctx3.fillRect(175, 300, 50, 50);
ctx3.beginPath();
ctx3.fillStyle = "green";
ctx3.strokeStyle = 'green';
ctx3.lineWidth = 1;
ctx3.moveTo(200, 100);
ctx3.lineTo(100, 300);
ctx3.lineTo(300, 300);
ctx3.stroke();
ctx3.fill();
</script>
</body>
<html>
Ejecución
Si desean ver ustedes mismo la página es:
Como pueden ver la programación no solo es hacer cálculos matemáticos o guardar o validar datos, también nos sirve para poder hacer gráficos o dibujos.
Saludos y felices fiestas!!! mis mejores deseos para esta Navidad mucha paz y un Prospero 2020!!
No olvide compartirnos y seguirnos en este blog o en Facebook.
Un comentario de una lectora
Hola
ResponderBorrarLeí tu página aquí programacionparatodos.com/2019/12/especial-navideno-dibujar-arbol-de.html y solo tengo dos palabras: ¡increíblemente útil! Me encantan los recursos sobre HTML que mencionas allí.
Compartí tu articulo con un colega y el compartió conmigo una guía muy útil sobre cómo usar HTML
https://www.websiteplanet.com/blog/html-guide-beginners/
Ya que tus lectores podrían necesitar esto tanto para su trabajo como para su vida personal, creo que ellos También la encontrarían muy útil si la agregas a tú página.
¡Gracias nuevamente por el recurso!
Saludos.