soy yo o este curso es simplemente genial?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Dibujando en el DOM
12/37Recursos
Vamos a dibujar en HTML, para esto usamos la etiqueta
Para dibujar usamos JS para darle las instrucciones y los canvas funcionan con coordenadas
Solamente llegando al canvas no podemos dibujar, debemos crear un contexto, ahora sí, mira cómo dibujar con HTML y JavaScript
Recuerda:
- ID es el identificador con el que podemos encontrar etiquetas con JavaScript, los nombres siguen las mismas reglas que las variables
- Puedes obtener un elemento con su id buscándolo con document.getElementById('nombre_id');
Aportes 2751
Preguntas 591
Ordenar por:
✨ canvas (<canvas>) es un elemento de HTML que se utiliza para dibujar gráficos a través de comandos mediante un lenguaje de programación.
Ahahaha, fue demasiado genial hacer "html + Tab" - Pare de sufrir =)
- getContext: es un método del objeto Canvas que obtiene el área dónde se va a dibujar.
- beginPath: un método que inicia un trazo.
- strokeStyle: variable para guardar el color de la línea.
- moveTo: método para mover el lápiz desde dónde va a dibujar la línea en las coordenadas especificadas.
- lineTo: traza una línea hasta las coordenadas especificadas.
- stroke: función que dibuja la línea con un estilo especificado.
- closePath: cierra el camino del trazo, es como levantar el lápiz.
Dibujé el logo de Platzi en canvas, lo pueden ver acá:
demo
…el código en este repo:
platziLogo
Hice un rectángulo conformado por triángulos, chécalo :D
canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dibujando en canvas</title>
</head>
<body>
<h1>Mi dibujito</h1>
<canvas width="500" height="500" id="dibujito"></canvas>
<p></p>
<script src="dibujo.js"></script>
</body>
</html>
dibujo.js
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
lienzo.beginPath();
lienzo.strokeStyle = "red";
lienzo.moveTo(200, 200);
lienzo.lineTo(300, 300);
lienzo.moveTo(400, 200);
lienzo.lineTo(200, 200);
lienzo.moveTo(400, 200);
lienzo.lineTo(300, 300);
lienzo.moveTo(500, 300);
lienzo.lineTo(400, 200);
lienzo.moveTo(500, 300);
lienzo.lineTo(300, 300);
lienzo.moveTo(200, 200);
lienzo.lineTo(100, 300);
lienzo.moveTo(100, 300);
lienzo.lineTo(300, 300);
lienzo.moveTo(300, 100);
lienzo.lineTo(200, 200);
lienzo.moveTo(300, 100);
lienzo.lineTo(400, 200);
lienzo.moveTo(400, 200);
lienzo.lineTo(500, 100);
lienzo.moveTo(500, 100);
lienzo.lineTo(300, 100);
lienzo.moveTo(500, 100);
lienzo.lineTo(500, 300);
lienzo.moveTo(100, 300);
lienzo.lineTo(100, 100);
lienzo.moveTo(100, 100);
lienzo.lineTo(300, 100);
lienzo.moveTo(100, 100);
lienzo.lineTo(200, 200);
lienzo.stroke();
lienzo.closePath();
¿Que aprendimos?
document.getElementById: Obtener un elemento con su id del documento
getContext(“2d”): Método del objeto canvas
lienzo.beginPath: Arranca o activa el dibujo
lienzo.strokeStyle: Se comporta como variable, atributo o propiedad del objeto".
lienzo.moveTo(100, 100): Funcion del canvas para definir el punto donde va arrancar la linea.
lienzo.lineTo(200, 200): Funcion del canvas para definir el punto final donde va a trazar la linea.
lienzo.stroke(); Dibuja la linea con el color que hemos elegido.
lienzo.closePath(): Cerramos el trazo, y lo damos finalizado.
El Lienzo es el contexto 2d que trajimops del canvas con su ID.
Este es mi aporte
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
/**Superior derecho */
var j=150;
for(i=0; i <= 150; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j+10;
}
var j=0;
for(i=150; i <= 300; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(i,0);
lienzo.lineTo(300,j);
lienzo.stroke();
lienzo.closePath();
j=j+10;
}
/**inferior derecho */
var j=150;
for(i=300; i >= 150; i=i-10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j+10;
}
var j=290;
for(i=150; i <= 300; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(300,i);
lienzo.lineTo(j,300);
lienzo.stroke();
lienzo.closePath();
j=j-10;
}
/**Superior izquierdo */
var j=150;
for(i=0; i <= 150; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j-10;
}
var j=150;
for(i=10; i <= 150; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(i,0);
lienzo.lineTo(0,j);
lienzo.stroke();
lienzo.closePath();
j=j-10;
}
/**inferior izquierdo */
var j=150;
for(i=300; i >= 150; i=i-10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j-10;
}
var j=10;
for(i=150; i <= 300; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(0,i);
lienzo.lineTo(j,300);
lienzo.stroke();
lienzo.closePath();
j=j+10;
}____
la trifuerzaaa
Barney habia explicado el canvas hace tiempo
El truco de ATOM que menciona Freddy es si tienes el Plugins Emmet instalado
Hola!
Les contare cual fue mi error que me tarde en encontrarlo… Espero le ayude a alguien que no pueda…
Este era el error que me aparecia en la consola:
Uncaught TypeError: Cannot read property ‘beginPath’ of null
at dibujo.js:4
Revice todo el codigo y me enfoque en las mayusculas y minusculas de:
lienzo.beginPath();
lienzo.strokeStyle = “red”;
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();
Y mi error si estaba en una mayuscula pero al poner “2D” ojo, va en minuscula.
Quiero ser programador estoy animado con el curso.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dibujando con canvas</title>
<style>
body
{
background-color: black;
color: white;
font.family: helvetica;
}
</style>
</head>
<body>
<h1>Dibujando en canvas</h1>
<canvas width="300" height="300" id="dibujito"></canvas>
<p>Asi queda tu dibujo</p>
<script src="dibujo.js"></script>
</body>
</html>
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(60, 70);
lienzo.lineTo(20, 110);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(20, 110);
lienzo.lineTo(60, 150);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(60, 150);
lienzo.lineTo(80, 130);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(80, 130);
lienzo.lineTo(70, 120);
lienzo.stroke();
lienzo.closePath();
Pues yo hice un “Creeper” jajaja
después de ver como 5 veces el video entiendo esto de los pixeles de canvas
QUIEN LO MIRA EN EL 2021???
Todo el codigo que use jajaja
pero valio la pena
Apuntes de Clase
- Así como las variables en Js tienen un nombre, una etiqueta en HTML tambien puede tenerlo, a través del atributo ID, es el atributo con el que JS va a ubicar una etiqueta, poseen las mismas reglas que las variables.
- getElementById => Es una función en JS que nos permite llamar a un objeto por su ID.
- getContext => Es una función del objeto que nos permite obtener el área del dibujo.
- En javascript se puede realizar trazados tanto en 2D como en 3D esto se especifica dentro de la función getContext(“2d”)/getContext(“3d”).
- beginPath => función del contexto de dibujos en 2d de JS que nos permite iniciar el trazo.
- strokeStyle => Atributo o propiedad que nos permite elegir el color del trazado de la línea.
- moveTo(x , y) => Metodo que posiciona el lápiz vitual en el punto inicial.
- LineTo(x , y) => Método o Función que traza la línea hasta el punto final.
- Stroke () => Colorea el trazo.
- closePath => método o función que levanta el lápiz, si esta función no se declara, la siguiente línea se unirá con el final de esta.
Definitivamente el limite son las estrellas.
Yo dibuje un Patricio Estrella. 😄
No estas equivocado este curso es lo mejor se lo recomendare a muchos.
Bueno porfin lo logré!!! son la 1:50 am!
Primero fue esto, pero me quivoque mientras entendia como ubicar los puntos en el plano
Y bueno este sie era el dibujo que quería!
Dibuje una carita feliz ,aquí el código
var d = document.getElementById (“dibujito”);
var lienzo = d.getContext(“2d”);
lienzo.beginPath();
lienzo.lineWidth= 10;
lienzo.strokeStyle = “pink”;
lienzo.moveTo(100, 100);
lienzo.lineTo(100, 200);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = “pink”;
lienzo.moveTo(200,100);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.moveTo(40, 150);
lienzo.bezierCurveTo(50, 300, 250, 300, 250, 150);
lienzo.stroke();
lienzo.closePath();
Hola, me figura un error de tipeo en la función getContext y no encuentro el problema. ¿Me podrian ayudar? Gracias
Intente hacer una figura que pareciera circulo pero mi cerebro no me dio para más 😦
.- la etiqueta de dibujo se llama canvas.
.- se dibuja a traves de js no de html.
.- funcionamiento del canvas.
.- uso de la etiqueta canvas en el codigo.
.- llamar un archivo js desde html.
.- el metodo getElementById(""), lo usamos para invocar al elemento dibujito por su id.
.- el metodo getContext("")}, le asignamos el elemento por su id a una variable que ladefinira por este metodo como 2d.
.- inspeccionamos este ultimo elemento con console.log.
.- Aquí comenzamos a dibujar:
.- lienzo.begin.path(), se coloca el lapiz en el papel
.- lienzo.strokeStyle=“red”, se define el color de la linea
.- lienzo.moveTo(), punto de inicio
.- lienzo.lineTo(), punto de finalización
.- lienzo.stroke(), trazar la linea
.- lienzo.closePath(), se levanta el lapiz
.- si no se cierra el camino, levanta el lapiz, la proxima linea que se programe, va a aempezar donde termino el path anterior.
jeje nombree tío jaja me tarde 4 dias haciendo eso jajaja asta que pude hoy
Me costó un montón, hasta que le agarré la forma. Hubiese querido hacer algo más, pero esta bien para empezar 😄
les dejo mis notas de esta clase
// notas de javascript
// en el ejemplo de var d vemos como cojemos el document.getlementbyid como en el css que en cascada podemos cojer elemntos del html
// el getelemntbyid sirve para cojer un id del html
// el getcontext es una funcion del objeto canvas que permite obtener el area donde vamos a dibujar recuerda que las mayusculas y minusculas
// son muy importantes en el javascript
// el beginPath es una funcion para indicar donde se inicia el trazo de la linea del dibujo
// strokeStyle es una variable una propiedad para elegir el color del trazo
// // el moveTo es una funcion del canvas para mover el lapiz a donde va arrancar la linea y se mide en x y en y del lienzo en el ejemplo
// se mueve de 100,100 del lienzo que es 300x300
// la funcion lineTo para trazar lineas o puntos lo que sea tambien se mide en x y y
// la funcion stroke dibuja la linea
// el closePath es para indicar donde se levanta el trazo una ves trazada la linea```
var d = document.getElementById(“piramide”); //obtener el elemento del canvas
var lienzo = d.getContext(“2d”); // obtener el area donde voy a dibujar Contexto 2d / 3d
console.log(lienzo);
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “yellow”;// asignar el color del trazo
lienzo.moveTo(70, 50); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(20, 170); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath(); // levantar el trazo y terminar de dibujar, sin esta instruccion cuando inicie una nueva linea iniciara donde finalizo la anterior
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “green”;// asignar el color del trazo
lienzo.moveTo(20, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(90, 170); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “black”;// asignar el color del trazo
lienzo.moveTo(20, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 140); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([10, 5]);// hace que la linea sea discontinua compuesta por fragmentos de línea de 10px separados por espacios de 5px
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “orange”;// asignar el color del trazo
lienzo.moveTo(70, 140); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 50); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “gray”;// asignar el color del trazo
lienzo.moveTo(70, 140); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(140, 140); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “blue”;// asignar el color del trazo
lienzo.moveTo(90, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 50); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([]); // deshabilita la discontinuidad de la linea para aislar la parte de código que establece el patrón de líneas discontinuas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “violet”;// asignar el color del trazo
lienzo.moveTo(90, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(140, 140); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([]); // deshabilita la discontinuidad de la linea para aislar la parte de código que establece el patrón de líneas discontinuas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “red”;// asignar el color del trazo
lienzo.moveTo(140, 140); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 50); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([]); // deshabilita la discontinuidad de la linea para aislar la parte de código que establece el patrón de líneas discontinuas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();
Aqui les dejo una prueba de como se vé en 3D
https://kevin-parra-lopez.web.app/
Super animada con el curso! y la idea es suscribirme para poder aprender mucho más. No más diseño gráfico mal pagado xD Quiero ser Frontend!!!
El curso esta genial y freddy esmuy claro, pero no se como me voy a acordar de tantas cosas a lo largo del tiempo
Así quedo mi dibujo
si les sirve dibujen el cuadrado en un papel y van jugando antes de colocar en el codigo es muy util me estaba reventando la cabeza a ver como lograba hacer una X pero con lapiz y papel pude entender mucho mejor!
Para los que usan la herramienta Visual Studio Code pongan :
html:
y presionen la tecla Tab.
van aparecer todos los elementos html,head,meta y body
Me costo entender como funcionaba realmente jsjsj pero pude ah
como no entendí bien me tome la molestia de practicar por mi cuneta y lo hice con el logo de platzi
var b = document.getElementById("dibujito");
var lienzo = b.getContext("2d")
console.log(lienzo);
lienzo.beginPath();
lienzo.strokeStyle ="green";
lienzo.moveTo(90,120);
lienzo.lineTo(80,110);
lienzo.lineTo(120,70);
lienzo.lineTo(80,30);
lienzo.lineTo(20,90);
lienzo.lineTo(70,140);
lienzo.lineTo(90,120);
lienzo.lineTo(100,130);
lienzo.lineTo(70,160);
lienzo.lineTo(0,90);
lienzo.lineTo(80,10);
lienzo.lineTo(140,70);
lienzo.lineTo(90,120);
lienzo.stroke();
lienzo.closePath();```
Yo doy mi reacción así:
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
lienzo.beginPath();
lienzo.strokeStyle="red";
lienzo.moveTo(150, 200);
lienzo.lineTo(250, 100);
lienzo.lineTo(200, 50);
lienzo.lineTo(150,100);
lienzo.lineTo(100, 50);
lienzo.lineTo(50,100);
lienzo.lineTo(150, 200);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle="red";
lienzo.moveTo(150, 190);
lienzo.lineTo(240, 100);
lienzo.lineTo(200, 60);
lienzo.lineTo(150,110);
lienzo.lineTo(100, 60);
lienzo.lineTo(60,100);
lienzo.lineTo(150, 190);
lienzo.stroke();
lienzo.closePath();```
Me costo mas hacer el “XD” que las curvas lol
Aqui el codigo que use:
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 700);
lienzo.lineTo(300, 1000);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 700);
lienzo.lineTo(700, 1000);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 700);
lienzo.lineTo(500, 400);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 400);
lienzo.lineTo(650, 600);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 400);
lienzo.lineTo(350, 600);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(400, 400);
lienzo.lineTo(600, 400);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(400, 250);
lienzo.lineTo(600, 250);
lienzo.stroke();
lienzo.closePath()
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(400, 400);
lienzo.lineTo(400, 250);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(600, 400);
lienzo.lineTo(600, 250);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(450, 350);
lienzo.lineTo(550, 350);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(525, 300);
lienzo.lineTo(535, 300);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(475, 300);
lienzo.lineTo(465, 300);
lienzo.stroke();
lienzo.closePath();
Para iniciar el trazado se necesita lo siguiente:
-.beginPath(); – Para empezar el dibujo.
- .strokeStyle="#color"; – Para escoger el color del trazo.
- .moveTo(x,y); – Para escoger el punto en donde empezaras el trazo.
-.lineTo(x.y); – Para escoger hasta donde irá el trazo. - .stroke(); – Para que se inicie el trazo.
- .closePath(); – Para terminar de dibujar.
En resumen, se podría decir que “canvas” funciona como un “lienzo” en blanco, donde la esquina superior izquierda es la coordenada (0, 0). En la cual el eje horizontal es “x” y el eje vertical es “y”.
Y para destacar tenemos diversos atributos y métodos para utilizar entre los cuales encontramos:
-".beginPath()" : Iniciamos a dibujar un trazo.
-".strokeStyle" : Especificamos el color del trazo.
-".moveTo(coordX , coordY)" : Nos “posiciona” en la coordenada especificada.
-".lineTo(coordX , coordY)" : Realiza el trazo partiendo desde la coordenada especificada primeramente en el “.moveTo” y finalizando en la coordenada especificada en el “.lineTo”.
-".stroke()" : Cerramos el trazo.
-".closePath()" : Terminamos de dibujar.
Son los apuntes que tomé 😄
les cuento algo curioso, los programadores de JavaScript utilizaron la notación camelCase para los nombres en las funciones y los métodos, como en el caso de document.getElementById(“id”) donde la primera palabra que compone el nombre está en minúsculas y las demás están capitalizadas, es decir, solamente la primera letra en mayúsculas
var d = document.getElementById("dibujito");
// metodo del documento para traer un elemento por su Id
var lienzo = d.getContext("2d");
// metodo del canvas para generar el contexto
lienzo.beginPath(); //metodo para comenzar un trazo
lienzo.strokeStyle = "blue"; //atributo que indica el color de la linea
lienzo.moveTo(50, 10); // inicia el trazo
lienzo.lineTo(250, 2); //final del trazo
lienzo.stroke(); //dibuja la linea
lienzo.closePath(); //cierra el trazo
Como consejo, pueden colocar comentarios dentro del codigo de javascript con //
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
console.log(lienzo);
lienzo.beginPath(); // Inicia un trazo
lienzo.strokeStyle = “red”; //Establece el colo rojo
lienzo.moveTo(100,100); //Comienzo de la linea
lienzo.lineTo(200,200); //Fin de la linea
lienzo.stroke(); // Realiza el trazo de la linea
lienzo.closePath(); //Cierra el trazo
var d = document.getElementById('dibujito')
var lienzo = d.getContext("2d");
console.log(lienzo); // esto es para verificar en la consola
lienzo.beginPath();
lienzo.strokeStyle = "black";
lienzo.moveTo(0, 0);
lienzo.lineTo(0, 250);
lienzo.stroke();
lienzo.moveTo(0, 250);
lienzo.lineTo(250, 250);
lienzo.stroke();
lienzo.moveTo(250, 250);
lienzo.lineTo(250, 0);
lienzo.stroke();
lienzo.moveTo(250, 0);
lienzo.lineTo(0, 0);
lienzo.stroke();
lienzo.closePath();
//Para hacer el cuadrado completo
APUNTES
La etiqueta de dibujo en HTML se llama <canvas>
reglas del canvas
Casi no ves nada ( Una caja en blanco)
Por HTML no se dibuja , se dibuja en JavaScript
<canvas> funciona con coordenadas (como el plano cartesiano)
Con X & Y
width= Ancho
Height= alto
atributo Id = ayuda a JavaScript a encontrar el elemento de HTML
escribo el código literalmente igual al vídeo y la palabra lienzo no se pone roja cuando la uso de objeto, y document no se pone amarillo, no se que hago mal
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
console.log(lienzo);
//Marco
lienzo.beginPath();
lienzo.rect(0, 0, 300, 300);
lienzo.lineWidth = "20"
lienzo.strokeStyle = "#943126"
lienzo.stroke();
lienzo.closePath();
//Texto
lienzo.font = "bold 30px Verdana";
lienzo.fillText("FRANK",173,170);
lienzo.fillText("GRANADOS",97,200);
lienzo.font = "bold 10px Arial";
lienzo.fillText("Sigueme en Instagram:",20,265);
lienzo.fillText("@frankogranados",20,280);
//LOGOTIPO
//Rectangulo Rojo
lienzo.beginPath();
lienzo.lineWidth = "1"
lienzo.fillStyle = "#943126";
lienzo.rect(20, 20, 150, 150);
lienzo.fill();
lienzo.closePath()
//Cuadros edificio
lienzo.beginPath();
lienzo.rect(90, 70, 60, 95);
lienzo.lineWidth = "15"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.rect(112, 75, 18, 90);
lienzo.lineWidth = "5"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.rect(90, 90, 60, 55);
lienzo.lineWidth = "5"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.rect(90, 110, 60, 20);
lienzo.lineWidth = "5"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();
//Lineas verticales
//De derecha a izquierda
lienzo.beginPath();
lienzo.lineWidth = "20"
lienzo.strokeStyle = "White"
lienzo.moveTo(75,100);
lienzo.lineTo(75,173);
lienzo.lineTo(55,173);
lienzo.stroke();
lienzo.closePath()
lienzo.beginPath();
lienzo.strokeStyle = "White"
lienzo.lineWidth = "20"
lienzo.moveTo(160,110);
lienzo.lineTo(160,175);
lienzo.stroke();
lienzo.closePath()```
gracias , tengo 37 años soy taxista con cero conocimientos pero debido al crecimiento de Uber me veo en la necesidad de buscar como competir y quiero crear una app hay mucha información y eso asusta pero encontré este curso y uff siento una pequeña emoción por que me permite soñar con poder crear mi app
Para los amantes de The Legends Of Zelda Hice la trifuerza
¿Alguien en 2021 amando este curso?
Lo de las coordenadas es algo confuso al principio XD
var d = document.getElementById("dibujito"); // Método que trae un elemento a travez de su Id
var lienzo = d.getContext("2d"); //Metodo del canvas para el contexto
lienzo.beginPath(); //Funcion para comenzar
lienzo.strokeStyle ="blue";//Atribujo - variable color de linea
lienzo.moveTo(100,100); //Inicio del trazo
lienzo.lineTo(200,200); //Final del trazo
lienzo.stroke(); // Dibujo trazo
lienzo.closePath(); //Funcion para terminar```
Buenas noches!
-
Hay alguna forma de que en Visual Studio Code las funciones aparezcan tipo “autocompletado”? Es decir, en vez de escribir todo el nombre de la función, ¿que me muestre las opciones?. Existirá alguna extensión en Visual para estas funciones?
-
Saben de algun sitio en Internet donde hablen de este tema mas en profundidad? Para conocer más funciones como estas.
Gracias 😃
Hice esta estrella de con trazos de forma continua…
Excelente explicación mejor no puede ser , Gracias
hola y siquisieradibujar desde una tableta wacon como haria una funcion para que desde la tableta dibuje en el canvas o existen otras opciones. saludos buen trabajo freddy
estoy llegando medio tarde al curso, veo k hay comentarios de mas de 3 años, pero lo bueno es que siegue siendo util, por lo menos para m i.
por que desde que pongo la t de </script> se me pone todo en color gris dando una señal de que e puesto algo mal y si quito la t vuelve a la normalidad como puedo soluciona eso que estoy haciendo mal
Uso Visual Studio Core en lugar de Atom y es excelente porque al poner una etiqueta te pone la etiqueta de cierre en automático.
Allí, está el atajo de poner en la primera línea “html:5” sin comillas o el signo “!” y presionar tabulador para que se pongan las etiquetas de html, head, body, etc.
soy la única ala que no le sale la linea trazada después de verificar como 20 veces que el código estuviera bien?
Aquí algunas pruebas que seguí haciendo con el canvas.
// #arma tu casita en canvas challenge
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
lienzo.beginPath();
lienzo.strokeStyle = “black”;
lienzo.moveTo(100, 100);
lienzo.lineTo(100, 200);
lienzo.lineTo(200, 200);
lienzo.lineTo(200, 100);
lienzo.lineTo(100, 100);
lienzo.lineTo(150, 0);
lienzo.lineTo(200, 100);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = “black”;
lienzo.moveTo(130, 200);
lienzo.lineTo(130, 150);
lienzo.lineTo(160, 150);
lienzo.lineTo(160, 200);
lienzo.stroke();
lienzo.closePath();
Tengo una duda:
No se por que no reconoce
var lienzo = d.getContext("2d");
Especificamente el get.Context.
No se si tenga que ver que estoy utilizando VSC.
Para dibujar en HTML es necesario usar una etiqueta.
Se requiere el uso JS para dar instrucciones a través de una función llamada canvas, canvas funciona con coordenadas
Canvas es una etiqueta de dibujo, que como todo, tiene reglas:
1. Visualmente se tiene que ver nada, literal solo se debe ver un espacio en blanco.
2. No se puede dibujar por HTML, todo se dibuja a través de JS.
Canvas por defecto siempre tiene un alto y un ancho.
Para dibujar se debe crear todo un contexto con HTML y JS.
En HTML tenemos un atributo con una característica muy especial, este es:
Id Su función es colocarle nombre a una etiqueta especial, JS se identificara con el y posteriormente encontrará la etiqueta. Id tiene exactamente las mismas reglas de una variable.
Para obtener un elemento a partir del id se usa document.getElementById, después tenemos getContext el cual es una función del objeto canvas, este nos permite obtener el área donde vamos a dibujar.
Y esto apenas es el comienzo, canvas tiene muchas funciones, cada una de ellas enfocada a cada detalle que tendrá nuestro dibujo.
Algunas de ellas son:
beginPath Es una función de JS que nos permite hacer trazos en 2d.
strokeStyle (Es una variable) Sirve para asignar un color a nuestra línea.
moveTo Función de canvas que nos permite mover el lápiz en donde va arrancar la línea.
lineTo Su función es trazar un línea
Stroke Dibuja la línea.
closePath Se usa para cerrar nuestra línea.
var at = document.getElementById("Amigo trazo"); <!-- Al ser funcion tiene un parametro -->
var lienzo = at.getContext("2d");
lienzo.beginPath();
lienzo.strokeStyle = "black";
lienzo.moveTo(50, 10);
lienzo.lineTo(250, 2);
lienzo.stroke();
lienzo.closePath();```
Algo simple, por ahora 😄
una pequeña animación con canvas javascript al dibujar un policigono y cambiar de color las lineas,falta optimizar el código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dibujando con CANVAS</title>
<style>
canvas {
display: block;
margin: auto;
align-self: center;
background-color: black;
border: solid white;
border-radius: 1rem;
}
body {
background-color: rgb(84, 104, 114);
text-align: center;
}
</style>
</head>
<body>
<h1>DIBUJO EN CANVAS</h1>
<canvas width="300" height="300" id="dibujito"></canvas>
<p>DIBUJO ANIMADO</p>
<script src="dibujo.js"></script>
</body>
</html>
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var i;
dibujar_poligono("red", 100, 100, 100, 200);
dibujar_poligono("blue", 150, 150, 50, 150);
dibujar_poligono("green", 100, 100, 150, 150);
dibujar_poligono("yellow", 100, 100, 50, 150);
dibujar_poligono("green", 50, 150, 100, 200);
dibujar_poligono("yellow", 150, 150, 100, 200);
dibujar_poligono("purple", 100, 150, 76, 125);
dibujar_poligono("purple", 100, 150, 127, 125);
dibujar_poligono("purple", 100, 150, 76, 178);
dibujar_poligono("purple", 100, 150, 126, 176);
setTimeout("animar()", 50);
setTimeout("animar()", 650);
setTimeout("animar()", 1300);
function dibujar_poligono(color, xini, yini, xfin, yfin) {
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xini, yini);
lienzo.lineTo(xfin, yfin);
lienzo.stroke();
lienzo.closePath();
}
function animar() {
// ... la magia sucede aqui
for (i = 0; i < 6; i++) {
if (i == 1) {
setTimeout("d1()", 100);
}
if (i == 2) {
setTimeout("d2()", 200);
}
if (i == 3) {
setTimeout("d3()", 300);
}
if (i == 4) {
setTimeout("d4()", 400);
}
if (i == 5) {
setTimeout("d5()", 500);
}
}
}
function limpiar() {
lienzo.clearRect(0, 0, 300, 300);
}
function d1() {
limpiar();
dibujar_poligono("green", 100, 100, 100, 200);
dibujar_poligono("red", 150, 150, 50, 150);
dibujar_poligono("blue", 100, 100, 150, 150);
dibujar_poligono("purple", 100, 100, 50, 150);
dibujar_poligono("green", 50, 150, 100, 200);
dibujar_poligono("purple", 150, 150, 100, 200);
dibujar_poligono("yellow", 100, 150, 76, 125);
dibujar_poligono("yellow", 100, 150, 127, 125);
dibujar_poligono("yellow", 100, 150, 76, 178);
dibujar_poligono("yellow", 100, 150, 126, 176);
}
function d2() {
limpiar();
dibujar_poligono("yellow", 100, 100, 100, 200);
dibujar_poligono("red", 150, 150, 50, 150);
dibujar_poligono("purple", 100, 100, 150, 150);
dibujar_poligono("blue", 100, 100, 50, 150);
dibujar_poligono("purple", 50, 150, 100, 200);
dibujar_poligono("yellow", 150, 150, 100, 200);
dibujar_poligono("green", 100, 150, 76, 125);
dibujar_poligono("green", 100, 150, 127, 125);
dibujar_poligono("green", 100, 150, 76, 178);
dibujar_poligono("green", 100, 150, 126, 176);
}
function d3() {
limpiar();
dibujar_poligono("yellow", 100, 100, 100, 200);
dibujar_poligono("purple", 150, 150, 50, 150);
dibujar_poligono("purple", 100, 100, 150, 150);
dibujar_poligono("green", 100, 100, 50, 150);
dibujar_poligono("red", 50, 150, 100, 200);
dibujar_poligono("yellow", 150, 150, 100, 200);
dibujar_poligono("blue", 100, 150, 76, 125);
dibujar_poligono("blue", 100, 150, 127, 125);
dibujar_poligono("blue", 100, 150, 76, 178);
dibujar_poligono("blue", 100, 150, 126, 176);
}
function d4() {
limpiar();
dibujar_poligono("purple", 100, 100, 100, 200);
dibujar_poligono("blue", 150, 150, 50, 150);
dibujar_poligono("green", 100, 100, 150, 150);
dibujar_poligono("green", 100, 100, 50, 150);
dibujar_poligono("blue", 50, 150, 100, 200);
dibujar_poligono("yellow", 150, 150, 100, 200);
dibujar_poligono("red", 100, 150, 76, 125);
dibujar_poligono("red", 100, 150, 127, 125);
dibujar_poligono("red", 100, 150, 76, 178);
dibujar_poligono("red", 100, 150, 126, 176);
}
function d5() {
limpiar();
dibujar_poligono("red", 100, 100, 100, 200);
dibujar_poligono("blue", 150, 150, 50, 150);
dibujar_poligono("yellow", 100, 100, 150, 150);
dibujar_poligono("green", 100, 100, 50, 150);
dibujar_poligono("red", 50, 150, 100, 200);
dibujar_poligono("yellow", 150, 150, 100, 200);
dibujar_poligono("purple", 100, 150, 76, 125);
dibujar_poligono("purple", 100, 150, 127, 125);
dibujar_poligono("purple", 100, 150, 76, 178);
dibujar_poligono("purple", 100, 150, 126, 176);
}
Coloque el canvas en la calculadora de peso anterior
yo que pensé que nunca iba a volver a ver un plano cartesiano en mi vida jajajajaj
Revisando minuciosamente logre ubicar el error
<script> src=“dibujo.js”</script>
siendo lo correcto
<script src=“dibujo.js”></script>
Una cosa tan sencilla me mato la cabeza!!
A los que no les queda claro por qué se coloca una mayúscula al principio de cada palabra después de otra. Es una regla en la programación (Camel case) que nos comenta que la cuando vamos a escribir 2 o más palabras juntas, la palabra siguiente a la otra debe llevar mayúscula para poder diferenciar mejor entre palabras y poder leer mejor. 😃
Aca dejo algunos datos importantes:
-
El canvas funciona similar a un plano cartesiano, sin embargo, solo utiliza las coordenadas positivas
-
Se puede personalizar las dimensiones del canvas con el uso de los atributos
width(ancho) yheight(largo) escribiendolas dentro de la etiqueta del canvas y asignadole el valor deseado. -
Para traer un elemento del codigo HTML se hace mediante su id el cual se le asigna al momento de crear el elemento, en este caso, el canvas. Se realiza de la siguiente forma: document.getElementById(“id_del_canvas”)
Hice un rectangulo.
lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(100,200);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(200,200);
lienzo.lineTo(200,150);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(200,150);
lienzo.lineTo(100,150);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(100,150);
lienzo.lineTo(100,200);
lienzo.stroke();
lienzo.closePath();
Hola, tu defines la variable lienzo con base en la variable d, que definiste antes, la primera vez que defines ‘d’ esta sale en gris, pero la segunda vez en el minuto 12:25 ‘d’ como ya fue definida aparece en otro color, como puedo configurar ATOM para que haga eso, a mi todo esa parte me aparece en gris, y esa funcion que tu tienes me parece muy util.Gracias
Les comparto mi código (.js) y el resultado:
var d = document.getElementById(“Dibujito”);
var lienzo = d.getContext(“2d”);
console.log(lienzo);
lienzo.beginPath();
lienzo.strokeStyle = “red”;
lienzo.moveTo(10, 10);
lienzo.lineTo(10, 290);
lienzo.stroke();
lienzo.lineTo(290, 290);
lienzo.stroke();
lienzo.lineTo(290, 10);
lienzo.stroke();
lienzo.lineTo(10, 10);
lienzo.stroke()
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = “blue”;
lienzo.arc(150, 150, 138, 0, 2 * Math.PI)
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = “green”;
lienzo.moveTo(150, 10);
lienzo.lineTo(10, 150);
lienzo.stroke();
lienzo.lineTo(290, 150);
lienzo.stroke();
lienzo.lineTo(150, 10);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = “yellow”;
lienzo.moveTo(150, 290);
lienzo.lineTo(10, 150);
lienzo.stroke();
lienzo.lineTo(290, 150);
lienzo.stroke();
lienzo.lineTo(150, 290);
lienzo.stroke();
lienzo.closePath();
Apunte de clase
Para dibujar en HTML es necesario usar una etiqueta.
Se requiere el uso JS para dar instrucciones a través de una función llamada canvas, canvas funciona con coordenadas
Canvas es una etiqueta de dibujo, que como todo, tiene reglas:
1. Visualmente se tiene que ver nada, literal solo se debe ver un espacio en blanco.
2. No se puede dibujar por HTML, todo se dibuja a través de JS.
Canvas por defecto siempre tiene un alto y un ancho.
Para dibujar se debe crear todo un contexto con HTML y JS.
En HTML tenemos un atributo con una característica muy especial, este es:
Id Su función colocarle nombre a una etiqueta especial, JS se identificara con el y posteriormente encontrará la etiqueta. Id tiene exactamente las mismas reglas de una variable.
Para obtener un elemento a partir del id se usa document.getElementById, después tenemos getContext el cual es una función del objeto canvas, este nos permite obtener el área donde vamos a dibujar.
Y esto apenas es el comienzo, canvas tiene muchas funciones, cada una de ellas enfocada a cada detalle que tendrá nuestro dibujo.
Algunas de ellas son:
beginPath Es una función de JS que nos permite hacer trazos en 2d.
strokeStyle (Es una variable) Sirve para asignar un color a nuestra línea.
moveTo Función de canvas que nos permite mover el lápiz en donde va arrancar la línea.
lineTo Su función es trazar un línea
Stroke Dibuja la línea.
closePath Se usa para cerrar nuestra línea.
NOTA:
§ ID es el identificador con el encontraremos etiquetas con JS, los nombres siguen las mismas reglas que las variables.
§ Document.getElementById(“nombre_id”) se usa para buscar y obtener un elemento con id.
le agregue una forma de cambiar el tamaño del canvas desde el javaScript sin tener q cambiarlo desde el html, seguro q va a ser util
var squareSpaceX = "400";
var squareSpaceY = "400";
var square = document.getElementById("canvasSuper");
var lineColor = "blue";
square.height = squareSpaceX;
square.width = squareSpaceY;
canvasSpace = square.getContext("2d");
//some consoles
console.log(canvasSpace);
console.log(squareSpaceX);
console.log(squareSpaceY);
console.log(square);
//funtions
canvasSpace.beginPath();
canvasSpace.strokeStyle = lineColor;
canvasSpace.moveTo(100, 100);
canvasSpace.lineTo(200, 200);
canvasSpace.stroke();
canvasSpace.closePath();
//funtion squareChange coming soon```
Algo de tiempo libre + Clases de Platzi =
console.log("Eureka");
var s2 = document.getElementById("s1");
var s3 = s2.getContext("2d");
s3.beginPath();
s3.strokeStyle = "white";
s3.moveTo(0, 0);
s3.lineTo(0, 300);
s3.lineTo(300, 300);
s3.lineTo(300, 0);
s3.lineTo(0, 0);
s3.lineTo(300, 300);
s3.moveTo(0, 300);
s3.lineTo(300, 0);
s3.moveTo(150, 0);
s3.lineTo(150, 300);
s3.moveTo(0, 150);
s3.lineTo(300, 150);
s3.lineTo(150, 0);
s3.lineTo(0, 150);
s3.lineTo(150, 300);
s3.lineTo(300, 150);
s3.moveTo(75, 0);
s3.lineTo(75, 300);
s3.moveTo(225, 0);
s3.lineTo(225, 300);
s3.moveTo(0, 75);
s3.lineTo(300, 75);
s3.moveTo(0, 225);
s3.lineTo(300, 225);
s3.moveTo(75, 300);
s3.lineTo(0, 225);
s3.lineTo(75, 150);
s3.lineTo(0, 75);
s3.lineTo(75, 0);
s3.lineTo(150, 75);
s3.lineTo(75, 150);
s3.lineTo(150, 225);
s3.lineTo(75, 300);
s3.moveTo(225, 0);
s3.lineTo(150, 75);
s3.lineTo(225, 150);
s3.lineTo(150, 225);
s3.lineTo(225, 300);
s3.lineTo(225, 0);
s3.lineTo(300, 75);
s3.lineTo(225, 150);
s3.lineTo(300, 225);
s3.lineTo(225, 300);
s3.moveTo(37.5, 0);
s3.lineTo(37.5, 300);
s3.moveTo(112.5, 0);
s3.lineTo(112.5, 300);
s3.moveTo(187.5, 0);
s3.lineTo(187.5, 300);
s3.moveTo(262.5, 0);
s3.lineTo(262.5, 300);
s3.moveTo(0, 37.5);
s3.lineTo(300, 37.5);
s3.moveTo(0, 112.5);
s3.lineTo(300, 112.5);
s3.moveTo(0, 187.5);
s3.lineTo(300, 187.5);
s3.moveTo(0, 262.5);
s3.lineTo(300, 262.5);
s3.stroke();
s3.closePath()
Me encantó esta lección, me divertí mucho haciendo esto:
PUDE HACER EL LOGO DE PLATZI
NO ME SALIO PERFECTO PERO SALIO 😉
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(95, 80);
lienzo.lineTo(95, 140);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(95, 80);
lienzo.lineTo(115, 90);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(115, 90);
lienzo.lineTo(95, 110);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(100, 140);
lienzo.lineTo(102, 140);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(115, 140);
lienzo.lineTo(150, 100);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(150, 100);
lienzo.lineTo(100, 50);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(100, 50);
lienzo.lineTo(40, 110);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(40, 110);
lienzo.lineTo(95, 175);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(95, 175);
lienzo.lineTo(120, 150);
lienzo.stroke();
lienzo.closePath();
Recordé winlogo hace muchos años la usábamos en el colegio para hacer dibujos con base en coordenadas y la pinche tortuga hacia los trazos
Para empezar a dibujar en JS se necesita crear dos variables:
-
Para traer la etiqueta desde el documento HTML
var d = document.getElementById(‘dibujito1’);
dibujito = al ID que le asignamos a la etiqueta canvas // Esto es una forma para traer o invocar una etiqueta de HTML a un archivo de JS -
Se indica la dimensión en la cual se trabajará (2d o 3d)
var lienzo = d.getContext(“2d”);
Se puede verificar con console.log(lienzo);
no he podido subir uma imagen, no se como la verdad, pero pude hacer el logo de platzi, sin las lineas curvas, y agrege dos propiedades que no estan en el ejercicio, ancho de la linea, y que sea redonda y no cuadrada, el area del dibujo en el html es 400 x 450 px
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
lienzo.lineWidth = "10";
lienzo.lineCap = "round"
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 10);
lienzo.lineTo(370, 170);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(370, 170);
lienzo.lineTo(210, 328);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 328);
lienzo.lineTo(90, 210);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(90, 210);
lienzo.lineTo(210, 90);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 90);
lienzo.lineTo(290, 170);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(290, 170);
lienzo.lineTo(210, 250);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 250);
lienzo.lineTo(290, 330);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(290, 330);
lienzo.lineTo(210, 410);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 410);
lienzo.lineTo(10, 210);
lienzo.stroke();
lienzo.closePath();
lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(10, 210);
lienzo.lineTo(210, 10);
lienzo.stroke();
lienzo.closePath();
me puse algo concentrado con las clases de fredy y esto salio.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.