Especial Navideño dibujar Árbol de Navidad con Javascript

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

https://www.programacionparatodos.com/p/ejemplo-dibujar-javascript.html

Si desean ver  ustedes mismo la página es:




Pueden encontrar mas ejemplos y probar su propio código en: https://www.w3schools.com/tags/canvas_arc.asp


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.

Comentarios

Entradas más populares de este blog

Ejemplo Macro en Word

Macro de Excel para abrir archivo csv

Graficar funciones en Python con dataframes