¿Qué es canvas en JavaScript?
Clase 2 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!
Contenido del curso
Angel David Velasco Bonifaz
student•
hace 3 años
Gilberto Santamaria
student•
hace 2 años
Angel David Velasco Bonifaz
Gilberto Santamaria
Marcelo Garro
Federico Maidana
Oscar Israel Román Quispe
Gualberto Montiel
Joselyne Ivanny Coello Moreira
Juan Pablo Soto Velasco
Raúl Adolfo Sánchez Rodríguez
Federico Ivan Llano
Juan David Reyes
Juan David Reyes
Yordy Leonardo Almonte Ruiz
Eduardo Nila
Josue Cerron Tuesta
Javier Núñez
Jorge Méndez Ortega
Federico Maidana
Alejandro Ramos
Raúl Adolfo Sánchez Rodríguez
Fabian Camilo Huertas Suarez
Luis Miguel Rodriguez
Uriel Solis Salinas
Axel Enrique Galeed Gutierrez
César Augusto Cortés Labrada
Valentin moronta
Kevin J. Zea Alvarado
Valentin moronta
Gerardo Garduño Rosas
Juan Pablo Soto Velasco
Gerardo Garduño Rosas
Ricardo Alfonso Chavez Vilcapoma
fillRect() no recibe 4 coordenadas, recibe 2 coordenadas, que son apartir de donde inicia a dibujar, y luego el ancho y el alto.
fillRect( xinicial, yinicial, width, height)
Importante aporte !
Para los que no les sale el auto completado de los métodos del canvas, les puedo compartir un consejo para no cometer errores de tipados con frecuencia.
/** * @type {HTMLCanvasElement} */ const canvas = document.querySelector("#game");
En realidad lo que hace es decir que nuestra constante "canvas" es de tipo HTMLCanvasElement, lo que nos mostrara los métodos en VSCode.
Buen dato
Exceelente, me funcionó, ¡muchas gracias!
Aqui algunos metodos de HTML5 Canvas:
!Metodos Canvas
function startGame(){ game.fillRect(100,25,100,100); game.clearRect(125,50,50,50); game.fillText('PLATZI', 133,78); }
Qué buena energía tiene el profesor! Vamos bien.
Recordatorio de eje x (horizontal) y eje y (vertical)
Se confundio en eso? porque para mi siempre el eje horizontal fue x y vertical el Y. Al principio siempre me lo confundia, pero recuerdo que en Unity 2d se usa para hacer saltar un personaje modificando el eje Y.
¿Qué es canvas en JavaScript?
Lo primero que necesitamos es el elemento de HTML donde vamos a renderizar el canvas, canvas nos sirve para renderizar gráficos 2D.
Como condición también tenemos que crear un contexto que es donde le decimos a canvas que queremos renderizar gráficos en 2d lo hacemos así
const game = canvas.getContext('2d');
Ahora la variable game ya tiene las propiedades para que usemos canvas, es recomendable usar canvas una vez el HTML se ha renderizado, por eso podemos usar un escuchador de eventos en el HTML para saber cuando se cargo y poder desde ese punto usar canvas.
fillRect()
Con este definimos el lugar donde va a iniciar nuestro trazo o figura geométrica, recibe 4 parámetros
game.fillRect(0,0,0,0);
clearRect()
Este nos sirve especialmente para borrar, esta función también recibe 4 parámetros y son los mismos antes mencionados, en este caso tenemos un borrado de la posición en Y y en X que le demos y los últimos 2 parámetros el grosor del borrado.
game.clearRect(0,0,50,50);
fillText()
Este nos permite insertar texto, cuando usemos esta propiedad es necesario que no solo le pasemos el texto sino también las propiedades para poderlo alinear.
game.fillText('setso', 100,100);
Dando estilos a nuestro texto
Para dar estilos tenemos algunas propiedades como
Su sintaxis es así, es un poco diferente a las otras por qué no son un método.
Con la propiedad font podemos añadir todos los estilos correspondientes a un texto como el tamaño o su tipografía.
game.font = '25px verdana';
Con fillStyle ya podemos darle otros estilos como el color
game.fillStyle = 'purple';
textAling()
Cómo su nombre lo dice es para poder alinear el texto, tenemos diferentes propiedades como:
game.textAling = 'rigth';
ufff, buenisimo tu aporte hermano, estas notas siempre me ayudan muchisimo a la hora de centralizar el tema aprendido en la clase actual ya sea para dejar notas, hacer commits, sintetizar info, en fin lo que sea que te ayude a crear un resumen de lo que trato la clase
Me parece interesante las funciones que existen en canvas , espero poder aprender mas de ellas
Con canvas se pueden hacer muchas cosas!
Existen mas métodos o funciones para "dibujar" en canvas, una de ellas es:
strokeReact(x, y, width, height);
La cual nos permite dibujar un contorno.
Acá puedes ver algunas funciones más: https://developer.mozilla.org/es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
Para este caso me gusta más utilizar
document.onreadystatechange = () => { const { readyState = "" } = document; if (readyState === "complete") { // Me gusta utilizar el $ siempre que hago referencia a un elemento del DOM lo considero como una buena práctica ya que facilita la lectura del código const $CANVAS = document.querySelector("#game"); const CONTEXT = $CANVAS.getContext("2d"); CONTEXT.fillRect(0, 0, 100, 100); // en esta parte se cargaría la función a utilizar } };
Genial, no conocía esta propiedad
Lo de textAlign ta interesante el como ajusta el texto
Método fillRect( )
Aprende sobre este método de la interface Canvas Rendering Context 2D:
Resumen de WEB APIs
Ahi vamos 😃
function startGame () { game.fillStyle = 'brown'; game.fillRect(100,25,100,100); game.clearRect(125,50,50,50); game.font = '16px Verdana'; game.fillStyle = "blue"; game.fillText('HOLI!', 128, 78); }
algunos métodos de Canvas que puedes usar para crear y manipular elementos en el canvas:
getContext(): Este método se utiliza para obtener el contexto de dibujo del canvas. El contexto de dibujo es un objeto que proporciona métodos y propiedades para dibujar en el canvas. El contexto se puede obtener en dos modos, 2D y 3D, y se puede llamar al método getContext() con el parámetro "2d" o "webgl" para obtener el contexto de dibujo correspondiente.fillRect(): Este método se utiliza para dibujar un rectángulo relleno en el canvas. El método toma cuatro argumentos: la posición x del rectángulo, la posición y del rectángulo, el ancho del rectángulo y la altura del rectángulo.strokeRect(): Este método se utiliza para dibujar un rectángulo con borde en el canvas. El método toma cuatro argumentos: la posición x del rectángulo, la posición y del rectángulo, el ancho del rectángulo y la altura del rectángulo.clearRect(): Este método se utiliza para borrar un área rectangular del canvas. El método toma cuatro argumentos: la posición x del área rectangular, la posición y del área rectangular, el ancho del área rectangular y la altura del área rectangular.beginPath(): Este método se utiliza para comenzar una nueva ruta de dibujo en el canvas. Los métodos moveTo() y lineTo() se utilizan a menudo después de este método para definir la ruta de dibujo.beginPath(): Este método se utiliza para comenzar una nueva ruta de dibujo en el canvas. Los métodos moveTo() y lineTo() se utilizan a menudo después de este método para definir la ruta de dibujo.moveTo(): Este método se utiliza para mover el cursor a una posición especificada en el canvas sin dibujar.lineTo(): Este método se utiliza para dibujar una línea desde la posición actual del cursor hasta una posición especificada en el canvas.stroke(): Este método se utiliza para dibujar la ruta de dibujo en el canvas con un borde.fill(): Este método se utiliza para dibujar la ruta de dibujo en el canvas rellenando la forma.arc(): Este método se utiliza para dibujar un arco en el canvas. El método toma seis argumentos: la posición x del centro del arco, la posición y del centro del arco, el radio del arco, el ángulo inicial del arco, el ángulo final del arco y la dirección del arco (opcional).Si a alguien le sirven mis apuntes:
/* === Métodos del canvas === */ game.fillRect(0,0,100,100); /* Lugar donde inicia el trazo. */ game.clearRect(0,0,50,50); /* Sirve como borrador para alguna parte del canvas. */ game.font = "25px Verdana"; /* Tamaño que tendrá el texto del fillText y tipo de fuente.*/ game.fillStyle = "Purple"; /* Nos permite añadir estilos CSS al fillText.*/ game.textAlign = "end"; /* Posición del texto, donde comienza o donde termina respecto a la posición X y Y. */ game.fillText("Uriel", 70, 70); /* Nos permite insertar texto dentro del canvas.*/
Les comparto mis apuntes. :D
CanvasRenderingContext2D.fillRect()
Con fillRect() podemos crear un cuadrado que parte desde un punto $X_i$ e $Y_i$, además, le podemos agregarle un ancho y un alto.
Sintaxis
CanvasRenderingContext2D.fillRect(Xi, Yi, WIDTH, HEIGHT);
CanvasRenderingContext2D.clearRect()
Contienen los mismos parámetros de fillRect(), solo que clearRect() se encarga de borrar lo que hayamos dibujado con fillRect().
Sintaxis
CanvasRenderingContext2D.clearRect(Xi, Yi, WIDTH, HEIGHT);
CanvasRenderingContext2D.fillText()
Con fillText() nos permite insertar un texto y para esto tenemos que darles las coordenadas de donde queremos insertar dicho texto.
Sintaxis
CanvasRenderingContext2D.fillText('Text', X, Y, maxWidth?);
CanvasRenderingContext2D.fillStyle
Con fillStyle, lo tratamos como un valor, nos permite agregarle estilis a nuestro texto.
Value
One of the following:
Sintaxis
CanvasRenderingContext2D.fillStyle = value;
CanvasRenderingContext2D.font
Con font, lo tratamos como un valor, nos permite definir la funte de nuestro texto.
Sintaxis
CanvasRenderingContext2D.font **= '**font-size family-font font-variant font-weight**';**
Más sobre .
****
Nos permite alinear el texto, teniendo como referencia a los ejes X e Y.
Value
Possible values:
"left"The text is left-aligned.
"right"The text is right-aligned.
"center"The text is centered.
"start"The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).
"end"The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).
The default value is "start".
Imagen de @Guadalupe Monge Barale en Platzi.
Sintaxis
= value;
Esto me recuerda que dejé abandonado el proyecto de la pizarra del curso básico de programación XD. Luego de aprender más sobre canvas en este curso seguro tendré mejores ideas para agregarle a ese otro proyecto.
Hola tengo un problema con el getContext ya me me salta un error: Uncaught TypeError: Cannot read properties of null (reading 'getContext') / este para ser mas expesifico, alguien sabe como resolverlo??
Hola, Valentin. 👋 Ese error suele aparecer porque no se está llamando correctamente al id del elemento. Asegúrate de que sean exactamente el mismo, incluyendo mayúsculas y minúsculas.
Si sigue sin funcionar, comparte tu código HTML y JavaScript.
Hola, nono aun no funciona no era el id ya lo mire, ahi te dejo el codigo:
<div class="game-container"> <!-- canvas de iteracion --> <canvas id="game"></canvas> <!-- botones --> <div class="btns"> <button id="up">Arriba</button> <button id="left">Izquierda</button> <button id="right">Derecha</button> <button id="down">Abajo</button> </div> <!-- texto extra del juego --> <div class="messages"> <p>Parrrafo de ejemplo</p> </div> </div> Y por aca el JS const canvas = document.querySelector('#game'); const game = canvas.getContext('2d'); window.addEventListener('load',starGame); function starGame() { game.fillRect(0,0,100,100); }
yo tengo un problema cuando cargo dentro de la pagina el getContext me marca any y me manda un error en el navegador
Connot read properties of hull ( reading getContext)
Qué raro, ¿podrías compartir tu código para ver qué podría ser?
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d');
Ojito que antes de dibujar cualquier cosa en el canvas, se tienen que agregar los estilos correspondientes...sino no va a reconocer la figura los estilos.
