Marcelo Garro
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.
Federico Maidana
Buen dato
Oscar Israel Román Quispe
Exceelente, me funcionó, ¡muchas gracias!
Gualberto Montiel
Aqui algunos metodos de HTML5 Canvas:
!Metodos Canvas
Joselyne Ivanny Coello Moreira
function startGame(){ game.fillRect(100,25,100,100); game.clearRect(125,50,50,50); game.fillText('PLATZI', 133,78); }
Juan Pablo Soto Velasco
Qué buena energía tiene el profesor! Vamos bien.
Raúl Adolfo Sánchez Rodríguez
Recordatorio de eje x (horizontal) y eje y (vertical)
Federico Ivan Llano
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.
Juan David Reyes
Juan David Reyes
Yordy Leonardo Almonte Ruiz
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
Eduardo Nila
Me parece interesante las funciones que existen en canvas , espero poder aprender mas de ellas
Josue Cerron Tuesta
Con canvas se pueden hacer muchas cosas!
Javier Núñez
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
Jorge Méndez Ortega
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 } };
Federico Maidana
Genial, no conocía esta propiedad
----- ----
Lo de textAlign ta interesante el como ajusta el texto
Raúl Adolfo Sánchez Rodríguez
Método fillRect( )
Aprende sobre este método de la interface Canvas Rendering Context 2D:
Resumen de WEB APIs
Fabian Camilo Huertas Suarez
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); }
Luis Miguel Rodríguez
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).
Uriel Solis Salinas
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.*/
Axel Enrique Galeed Gutierrez
César Augusto Cortés Labrada
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.
Valentin moronta
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??
Kevin J. Zea Alvarado
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.
Valentin moronta
Gerardo Garduño Rosas
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)
Juan Pablo Soto Velasco
Qué raro, ¿podrías compartir tu código para ver qué podría ser?
Gerardo Garduño Rosas
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d');
Ricardo Alfonso Chavez Vilcapoma
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.
¿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';
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;
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); }