Programar con metáforas: cómo el lenguaje moldea el software… y nuestra forma de entenderlo En el mundo de la programación, muchas veces usamos palabras que no vienen de lo técnico, sino de la vida cotidiana, la naturaleza, o incluso lo espiritual. Árboles, hijos, demonios, hilos, nubes... ¿por qué usamos estos términos para describir conceptos de software? Este artículo es una reflexión sobre cómo las metáforas nos ayudan —y a veces nos limitan— cuando intentamos comprender el mundo del código. 🌱 Inspiraciones naturales y biológicas Desde las estructuras de datos hasta la inteligencia artificial, usamos muchos conceptos tomados de la biología o el mundo físico: Redes neuronales: inspiradas en el cerebro humano, aunque su funcionamiento real sea muy diferente. Árboles, ramas, hojas: estructuras que usamos para modelar relaciones jerárquicas. Algoritmos genéticos: evolución artificial basada en selección y mutación. 👪 Relaciones familiares en estructuras En ...
Especial Navideño dibujar Árbol de Navidad con Javascript
- Obtener vínculo
- X
- Correo electrónico
- Otras apps
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 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:
Pueden encontrar mas ejemplos y probar su propio código en: https://www.w3schools.com/tags/canvas_arc.asp
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
Leí tu página aquí programacionparatodos.com/
Compartí tu articulo con un colega y el compartió conmigo una guía muy útil sobre cómo usar HTML
https://www.websiteplanet.com/
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.
#programacionparatodos
consejos para iniciar en javascript
dibujar circulo en javascript
dibujar rectangulo javascript
dibujar triangulo Javascript
Javascript
- Obtener vínculo
- X
- Correo electrónico
- Otras apps
Comentarios
🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!
Entradas más populares de este blog
Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web
Bienvenidos a programacionparatodos.com Esta semana vamos a conocer otro lenguaje de programación que es ASP ( Active Server Pages ) que es de la familia de Microsoft es plataforma Cliente/Servidor y que permite crear páginas WEB dinámicas, utiliza un servicio conocido como IIS o (Internet Information Services) fue creado en 1996. Cuando ven paginas WEB que terminan en .aspx es que están desarrolladas con este lenguaje. Páginas que por ejemplo utilizan ASP https://www.cfe.mx/Pages/Index.aspx https://www.interfactura.com/Index.aspx https://www.canadainternational.gc.ca/mexico-mexique/index.aspx?lang=spa Igual hay mucho trabajo para este software por ejemplo les dejó las siguientes vacantes Desarrollador .NET .NET Developer NET LEAD Para seguir con el formato del blog, les quiero compartir un programa de ejemplo, pero he de decirles que es la primera vez que programo en ASP , ya que no lo había hecho antes, me tomo...
📊 Automatiza tu trabajo: Convierte tablas de Word a Excel con una macro
Si trabajas en una oficina, seguro te enfrentas a tareas repetitivas que consumen mucho tiempo, como copiar datos de una tabla en Word a una hoja de Excel. Afortunadamente, existe una forma de automatizar este proceso mediante macros en Word, lo que te permitirá ahorrar tiempo y esfuerzo, y enfocarte en tareas más importantes. ¿Qué es una macro? Una macro es una secuencia de instrucciones que te permite automatizar tareas repetitivas en aplicaciones como Word y Excel. Utilizando el lenguaje VBA (Visual Basic for Applications), puedes escribir códigos que realicen tareas como copiar tablas de un documento de Word y pegarlas en una hoja de Excel con solo hacer clic en un botón. ¿Por qué debería usar una macro para convertir tablas de Word a Excel? Ahorra tiempo : Si trabajas con grandes cantidades de datos, una macro puede copiar todo de una tabla a Excel de forma rápida y precisa. Minimiza errores : El proceso manual de copiar y pegar puede dar lugar a errores humanos, ...
API de banxico para obtener tipo de cambio utilizando Javascript
En esta entrada vamos a ver un código de Javascript para obtener el tipo de cambio del Banco de México (Banxico) mediante API, puedes usar el siguiente código JavaScript. Este ejemplo utiliza `fetch` para realizar la solicitud a la API. Asegúrate de tener una API Key de Banxico. Banxico token Para poder ejecutarlo necesitamos obtener primero nuestro token en https://www.banxico.org.mx/SieAPIRest/service/v1/token Con ese token puedes hacer hasta 40,000 consultas gratis por día. Cómo llamar api de banxico y javascript Después necesitamos identificar la serie del dato que queremos identificar , en este ejemplo vamos a utilizar la serie SF43718 el cual obtenemos de la liga https://www.banxico.org.mx/SieAPIRest/service/v1/doc/catalogoSeries# <html> <head> <title>Tipo de Cambio Banxico</title> <style> body { font-family: Arial, sans-serif; ...
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.