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:
https://www.w3schools.com/html/html5_canvas.asp

  • 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:

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

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

Publicar un comentario

Entradas más populares de este blog

Ejemplo Macro en Word

Imagen
Hola: ¿Sabían que no solo en Excel pueden hacer Macros?  ¡¡¡También en Outlook, Word, Power Point,Access  es posible hacer Macros!!!  ☺️ Ya que Word, Excel, Power Point,Access son de familia Microsoft y Visual Basic también es que podemos programar nuestras macros en esta paquetería. Como hemos visto antes, para poder programar nuestras macros, necesitamos primero configurar la Barra de tareas de Developer o Desarrollador Seleccionan el Menu File>Options>Customize Ribbon o en Español Archivo>Opciones>barra de tareas Despues la parte de seguridad de las macros Menu File>Options>Trus Center o Archivo>Opciones>Centro de Seguridad y marcamos como se ve en la imagen, la cuarta opción y el combo Ejemplo Vamos hacer un ejemplo donde, tengamos que generar varios diplomas de fin de curso, pero con una lista de Nombres , entonces vamos a crear un nuevo archivo en Word y le vamos a guardar como tipo Macro  Tenemos una plantill
Leer más

Macro de Excel para abrir archivo csv

Imagen
Hay veces que quieres abrir un archivo de Excel pero está separado por comas, punto y coma o por un pipe. Hay formas de hacerlos desde Excel. Les quiero compartir algunas opciones de como hacerlo y espero que les sean de utilidad. 1.Es abrir el archivo en Excel y utilizar la función de separar por columnas y seleccionar el delimitador, por ejemplo ";" 2. Es colocar "sep=;" en el primer renglón del archivo que quieres abrir y guardar en formato CSV y abrirlo en Excel y te lo abrirá separado en columnas. 3. Otra forma es con una macro, esté en mi gusto es la que más me funciona porque si hay alguna coma en la descripción o en alguna columna, si lo abres desde Excel te va a desacomodar las columnas.  Este botón te abrirá un pantalla para abrir el archivo que quieres separar y te lo abrirá en una hoja de excel ya separado. El código de la macro es el siguiente  Private Sub CommandButton1_Click() Dim sht As Worksheet Dim fnd As Variant Dim rplc As Variant Dim
Leer más

Como ejecutar SQL desde Tareas Programadas de Windows

Imagen
Bienvenidos a este blog, esta semana les quiero compartir otro ejemplo de archivos BAT o Batch en Windows para ejecutar una consulta a una base de datos SQL con la instrucción sqlcmd y poder ejecutar tareas programadas en sql server desde las tareas programadas de Windows. El comando sqlcmd es de Microsfot y nos ayuda para ejecutar consultas desde un archivo esta es la definición que da Microsoft La utilidad sqlcmd es una utilidad de la línea de comandos para la ejecución ad hoc e interactiva de instrucciones y scripts de Transact-SQL y para la automatización de tareas de scripting de Transact-SQL. Para usar sqlcmd interactivamente, o para compilar archivos de script que se ejecutan mediante sqlcmd, los usuarios deben estar familiarizados con Transact-SQL. La utilidad sqlcmd se usa normalmente de las formas siguientes: Ejemplo: Objetivo: Ejecutar un query a una base de datos para obtener las facturas timbradas a clientes y crear un archivo csv de salida y alojarlo en una carpet
Leer más