Empieza por acá
Mi primera línea de código
Fundamentos de Programación
¿Qué es HTML/CSS/JS?
JavaScript no es Java
Primeros pasos en el navegador con alert
HTML, CSS, JavaScript de verdad
Los apuntes de Freddy en PDF
Primer proyecto: Peso en otro planeta
Peso en otro planeta
Obteniendo datos del usuario
Flujo y condicionales
Segundo proyecto: Dibujando con Canvas
Cómo funcionan Window y Document
El DOM: nuestro lugar de trabajo en la web
Dibujando en el DOM
Qué son las Funciones en JavaScript
Ciclos while y for en JavaScript
Eventos y Formularios en HTML y JavaScript
Detectar eventos del teclado con JavaScript
Dibujar en canvas con las flechas del teclado
Tercer proyecto: Villa platzi
Funciones matemáticas y números aleatorios en JavaScript
Uso y carga de imágenes en Canvas
Cuarto proyecto: Pakimanes
División, módulo y residuo en JavaScript
Clases y Arrays en JavaScript
Quinto proyecto: Cajero automático
Diagrama de Flujo del Cajero Automático
Implementación del Cajero Automático
Sexto proyecto: Cliente/Servidor
Primer servidor web con express
Modelo Cliente/Servidor
Programación de Hardware y Electrónica con Arduino
¿Cómo funciona un circuito electrónico?
¿Cómo programar un Arduino?
Programación de circuitos con C, Arduino y Sketch
Cómo programar un Arduino con Javascript y Node
Construye un Robot con JavaScript
Robot para riego de plantas en Arduino, Javascript y Node
Materiales de apoyo
Las mejores notas de los estudiantes
¿Cuál lenguaje de programación aprender primero?
La Web con Visión Profesional
Contenido Bonus
Qué son tablas de verdad y compuertas lógicas
Recap Curso Gratis de Programación Básica
Recap Programación básica
Recap Programación básica ENG
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Para dibujar en HTML usamos la etiqueta canvas. Canvas (
El uso de la etiqueta es el siguiente:
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
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’);
Aporte creado por: Brayan Mamani
Aportes 2205
Preguntas 759
✨ 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.
QUIEN LO MIRA EN EL 2021???
Barney habia explicado el canvas hace tiempo
la trifuerzaaa
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;
}____
Pues yo hice un “Creeper” jajaja
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.
Yo dibuje un Patricio Estrella. 😄
¿Alguien en 2021 amando este curso?
Apuntes de Clase
<!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();
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!
Todo el codigo que use jajaja
pero valio la pena
Definitivamente el limite son las estrellas.
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
Hola, me figura un error de tipeo en la función getContext y no encuentro el problema. ¿Me podrian ayudar? Gracias
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();
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");
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()```
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
Quien esta aqui en 2021???
Aqui les dejo una prueba de como se vé en 3D
https://kevin-parra-lopez.web.app/
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();```
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```
El curso esta genial y freddy esmuy claro, pero no se como me voy a acordar de tantas cosas a lo largo del tiempo
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!
Me costó un montón, hasta que le agarré la forma. Hubiese querido hacer algo más, pero esta bien para empezar 😄
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();
;
// 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
Hice esta estrella de con trazos de forma continua…
No soy fan de Atom como editor! si alguien mas intenta el ejercicio con Visual Studio Code se dara cuenta que .getElementById no contiene a .getContext. La solucion es:
var d = /** @type {HTMLCanvasElement} */ (document.querySelector(‘dibujito’));
var lienzo = d.getContext(“2d”);
con mucha paciencia jeje
Coloque el canvas en la calculadora de peso anterior
;
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();
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é 😄
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();```
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 😃
Como solucionar el error Uncaught TypeError: Cannot read property ‘getContext’.
Este error me costó dos días resolverlo y en verdad que es muy tonto si se puede llamar, pero bueno estamos aprendiendo y les comparto que para solucionarlo es algo muy sencillo, recordemos que asignamos una Identificación “id” llamada “dibujito”.
Pues para solucionar este problema chequen que en su archivo HTML y en el JS digan los mismo.
<canvas width=“300” height=“300” id=“dibujito”></canvas>
var d = document.getElementById(“dibujito”);
Lo de las coordenadas es algo confuso al principio XD
Para los amantes de The Legends Of Zelda Hice la trifuerza
Para iniciar el trazado se necesita lo siguiente:
-.beginPath(); – Para empezar el dibujo.
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
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
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
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!!
yo que pensé que nunca iba a volver a ver un plano cartesiano en mi vida jajajajaj
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
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.
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```
Excelente explicación mejor no puede ser , Gracias
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
Nuevos Conceptos de HTML:
<canvas>: Etiqueta que se utiliza para dibujar graficas 2D o 3D usando código JavaScript.
id: Atributo que asigna un valor único a una etiqueta.
width: Atributo que establece el ancho de pixeles en una etiqueta.
height: Atributo que establece la altura de pixeles en una etiqueta.
Nuevos Conceptos de JavaScript:
getElementById: Metodo que devuelve un elemento con un valor determinado.
getContext: Método que se utiliza para establecer si el modelo de dibujo es 2d o 3d.
beginPath: Método para establecer que vamos a iniciar un trazo.
strokeStyle: Atributo que determina el color del trazo.
moveTo: Método que establece el punto iniciar del trazo.
lineTo: Método que establece el punto final del trazo.
stroke: Método que se utiliza para dibujar el trazo.
closePath: Metodo que indica el final del dibujo.
NOTA: A diferencia de moveTo y lineTo, los cuales solamente denotan las coordenadas dentro del canvas, stroke se usa para dibujar el trazo. (moveTo y lineTo NO dibujan el trazo).
Aquí algunas pruebas que seguí haciendo con el canvas.
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);
}
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) y height
(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();
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();
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.
La funcion getElementById al ser nativa de JS se le denomina método, ya que está dentro del objeto DOCUMENT.
Importante: Los parámetros de las funciones van entre PARENTESIS y no con IGUAL, duré como 20 minutos con un error y ese era el problema. Para que no les pase
Para dibujar en HTML es ncesario usar la etiqueta
<canvas></canvas>
pero todo el codigo se hace en JS, lo unico que necesitamos es hacer referencia desde el archivo JS a la etiqueta
<canvas></canvas>
Esto lo hacemos con un id como atributo de la etiqueta
<canvas with="300" height="300" id="dibujito ></canvas>
en el HTML y con el método
getElementById("dibujito")```
El canvas puede tener las dimensiones que queramos, por defecto aparece con una dimensión predeterminada.
El id nos sirve para que con JS podamos encontrar y manipular elementos html
Hice esta broma xD
Que loco, no me aparecía la línea, el error fue escribir (strokes) en vez de (stroke). Me sentí humillado, pero tremendamente bien cuando descubrí el mínimo error 😄
Hasta las 12:34 ya que no me corría. me sentí genial cuando lo logre correr. Si se puede 😃
Quien lo mira en 2022? 😄
hola, asi es como yo lo hice, nueno soy principiante y no me salio muy bien, pero yo estoy contento con lo que logre.
Aqui les va el mio:
Captura.PNG
Hola aqui dejo mi ejercicio de la clase. Sin embargo para los que esten teniendo problemas con el error (Uncaught TypeError: Cannot read property ‘getContext’) en Visual Studio Code aqui les dejo la solucion.
https://www.howtosolutions.net/2016/09/visual-studio-fixing-intellisense-canvas-context-not-working-issue/
Se deben seguir el segundo camino y luego de esto visual studio ya reconocera la propiedad ‘getContext’.
Espero les Sirva la info!!!
!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.