Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 17D : 11H : 2M : 49S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Dibujando en el DOM13/36

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');

soy yo o este curso es simplemente genial?

Ahahaha, fue demasiado genial hacer "html + Tab" - Pare de sufrir =) 

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.

Capture2.PNG
  • 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

Captura de pantalla (121).png

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();



canvas3.png

Este es mi aporte

dibujo_canvas.png

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;

}____

¿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.

El truco de ATOM que menciona Freddy es si tienes el Plugins Emmet instalado

la trifuerzaaa
Screenshot_1.png

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();
dibujito.JPG

después de ver como 5 veces el video entiendo esto de los pixeles de canvas  

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.

Barney habia explicado el canvas hace tiempo

Todo el codigo que use jajaja
pero valio la pena

practica de canvas.png

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.

Pues yo hice un “Creeper” jajaja

Imagen1.png
android.png
Captura de pantalla (5).png
Untitled-1.jpg

1.JPG2.JPG

Platzi.png

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();

Captura1.JPG

Yo dibuje un Patricio Estrella. 😄

https://liiliith.github.io/canvas/

No estas equivocado este curso es lo mejor se lo recomendare a muchos.

.- 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.

Bueno porfin lo logré!!! son la 1:50 am!
Primero fue esto, pero me quivoque mientras entendia como ubicar los puntos en el plano
rectangulo.png
Y bueno este sie era el dibujo que quería!
estrella poderosa.png

2d.png

Definitivamente el limite son las estrellas.

Screenshot_20200602_200925.png

Intente hacer una figura que pareciera circulo pero mi cerebro no me dio para más 😦intento.PNGCaptura.PNG

Me costó un montón, hasta que le agarré la forma. Hubiese querido hacer algo más, pero esta bien para empezar 😄

2020-03-30 20_41_42-Window.png

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```
6.png

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();

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!

Así quedo mi dibujo
dibujo.jpg

Hola, me figura un error de tipeo en la función getContext y no encuentro el problema. ¿Me podrian ayudar? Gracias

Captura de pantalla 2019-10-03 a la(s) 09.59.27.png
Captura de pantalla 2020-05-31 00.07.09.png
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()```


8.png

8(1).png
jeje nombree tío jaja me tarde 4 dias haciendo eso jajaja asta que pude hoy

Yo doy mi reacción así:
Captura.PNG

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();```

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!!!

como no entendí bien me tome la molestia de practicar por mi cuneta y lo hice con el logo de platzi
Captura.PNG

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();```
Mi primer dibujo en canvas.JPG

El curso esta genial y freddy esmuy claro, pero no se como me voy a acordar de tantas cosas a lo largo del tiempo

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

soy la única ala que no le sale la linea trazada después de verificar como 20 veces que el código estuviera bien?

Me costo entender como funcionaba realmente jsjsj pero pude ah
CapturaDibujo.PNG

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

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

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");
// 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

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

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é 😄

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.

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.

Me costo mas hacer el “XD” que las curvas lolxd.PNG
Aqui el codigo que use:
codigo.PNG

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 Captura.PNG

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.

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

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

Excelente explicación mejor no puede ser , Gracias

Captura de pantalla 2019-10-25 a la(s) 13.55.52.png

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();

Hice esta estrella de con trazos de forma continua…

canvas.PNG

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 😃

casa.jpg

Hasta las 12:34 ya que no me corría. me sentí genial cuando lo logre correr. Si se puede 😃

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```

![](dibujito.png

Lo de las coordenadas es algo confuso al principio XD
dibujo_en_canvas.jpg

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 😄

Le pregunte al usuario a través de prompt, los argumentos para dibujar la línea.
function.jpg

aun no me queda claro que funcion cumple el "id", alguien me podría ayudar ?. Gracias

Canvas.PNG
Captura.PNG

Hice esta broma xD

canvas.png

Aqui les dejo una prueba de como se vé en 3D
https://kevin-parra-lopez.web.app/

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

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
DIBUJITO.png

Aquí algunas pruebas que seguí haciendo con el canvas.
canvas

Para los amantes de The Legends Of Zelda Hice la trifuerza
canvas.PNG
trifuerza.PNG

paint.jpg me puse algo concentrado con las clases de fredy y esto salio.

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();

Para empezar a dibujar en JS se necesita crear dos variables:

  1. 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

  2. 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);

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
logo de platzi.jpg

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();

Me encantó esta lección, me divertí mucho haciendo esto: daniel_escobedo_canvas.png

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()

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```
dibujo canva.png

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.

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();
Dibuja Canvas.PNG

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

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();

Aca dejo algunos datos importantes:

  1. El canvas funciona similar a un plano cartesiano, sin embargo, solo utiliza las coordenadas positivas

  2. 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.

  3. 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”)

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. 😃

canvas.png

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!!

soy yo o este curso es simplemente genial?

Ahahaha, fue demasiado genial hacer "html + Tab" - Pare de sufrir =) 

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.

Capture2.PNG
  • 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

Captura de pantalla (121).png

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();



canvas3.png

Este es mi aporte

dibujo_canvas.png

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;

}____

¿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.

El truco de ATOM que menciona Freddy es si tienes el Plugins Emmet instalado

la trifuerzaaa
Screenshot_1.png

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();
dibujito.JPG

después de ver como 5 veces el video entiendo esto de los pixeles de canvas  

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.

Barney habia explicado el canvas hace tiempo

Todo el codigo que use jajaja
pero valio la pena

practica de canvas.png

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.

Pues yo hice un “Creeper” jajaja

Imagen1.png
android.png
Captura de pantalla (5).png
Untitled-1.jpg

1.JPG2.JPG

Platzi.png

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();

Captura1.JPG

Yo dibuje un Patricio Estrella. 😄

https://liiliith.github.io/canvas/

No estas equivocado este curso es lo mejor se lo recomendare a muchos.

.- 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.

Bueno porfin lo logré!!! son la 1:50 am!
Primero fue esto, pero me quivoque mientras entendia como ubicar los puntos en el plano
rectangulo.png
Y bueno este sie era el dibujo que quería!
estrella poderosa.png

2d.png

Definitivamente el limite son las estrellas.

Screenshot_20200602_200925.png

Intente hacer una figura que pareciera circulo pero mi cerebro no me dio para más 😦intento.PNGCaptura.PNG

Me costó un montón, hasta que le agarré la forma. Hubiese querido hacer algo más, pero esta bien para empezar 😄

2020-03-30 20_41_42-Window.png

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```
6.png

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();

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!

Así quedo mi dibujo
dibujo.jpg

Hola, me figura un error de tipeo en la función getContext y no encuentro el problema. ¿Me podrian ayudar? Gracias

Captura de pantalla 2019-10-03 a la(s) 09.59.27.png
Captura de pantalla 2020-05-31 00.07.09.png
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()```


8.png

8(1).png
jeje nombree tío jaja me tarde 4 dias haciendo eso jajaja asta que pude hoy

Yo doy mi reacción así:
Captura.PNG

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();```

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!!!

como no entendí bien me tome la molestia de practicar por mi cuneta y lo hice con el logo de platzi
Captura.PNG

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();```
Mi primer dibujo en canvas.JPG

El curso esta genial y freddy esmuy claro, pero no se como me voy a acordar de tantas cosas a lo largo del tiempo

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

soy la única ala que no le sale la linea trazada después de verificar como 20 veces que el código estuviera bien?

Me costo entender como funcionaba realmente jsjsj pero pude ah
CapturaDibujo.PNG

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

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

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");
// 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

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

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é 😄

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.

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.

Me costo mas hacer el “XD” que las curvas lolxd.PNG
Aqui el codigo que use:
codigo.PNG

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 Captura.PNG

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.

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

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

Excelente explicación mejor no puede ser , Gracias

Captura de pantalla 2019-10-25 a la(s) 13.55.52.png

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();

Hice esta estrella de con trazos de forma continua…

canvas.PNG

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 😃

casa.jpg

Hasta las 12:34 ya que no me corría. me sentí genial cuando lo logre correr. Si se puede 😃

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```

![](dibujito.png

Lo de las coordenadas es algo confuso al principio XD
dibujo_en_canvas.jpg

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 😄

Le pregunte al usuario a través de prompt, los argumentos para dibujar la línea.
function.jpg

aun no me queda claro que funcion cumple el "id", alguien me podría ayudar ?. Gracias

Canvas.PNG
Captura.PNG

Hice esta broma xD

canvas.png

Aqui les dejo una prueba de como se vé en 3D
https://kevin-parra-lopez.web.app/

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

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
DIBUJITO.png

Aquí algunas pruebas que seguí haciendo con el canvas.
canvas

Para los amantes de The Legends Of Zelda Hice la trifuerza
canvas.PNG
trifuerza.PNG

paint.jpg me puse algo concentrado con las clases de fredy y esto salio.

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();

Para empezar a dibujar en JS se necesita crear dos variables:

  1. 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

  2. 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);

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
logo de platzi.jpg

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();

Me encantó esta lección, me divertí mucho haciendo esto: daniel_escobedo_canvas.png

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()

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```
dibujo canva.png

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.

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();
Dibuja Canvas.PNG

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

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();

Aca dejo algunos datos importantes:

  1. El canvas funciona similar a un plano cartesiano, sin embargo, solo utiliza las coordenadas positivas

  2. 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.

  3. 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”)

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. 😃

canvas.png

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!!