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 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
Comentarios
Publicar un comentario