Lienzo
El constructor Canvas
crea un nuevo elemento canvas
HTML5 y lo añade a tu
página web.
¡Es como la función createCanvas
de p5.js, pero con algunas características adicionales!
Usa canvas.w
y canvas.h
para obtener el ancho y el alto del lienzo.
Si no se pasan parámetros a new Canvas()
, se creará un lienzo que llena toda la ventana.
También puedes pasar una relación de aspecto al constructor de Canvas. Esto creará el lienzo más
grande posible que se ajuste dentro de la ventana, manteniendo la relación de aspecto dada. Por
ejemplo, new Canvas('2:1')
creará un lienzo que es el doble de ancho que de alto.
Otra característica añadida es el preajuste "pantalla completa", new Canvas(1920, 1080,
'fullscreen')
ajustará el lienzo para que encaje dentro de la ventana, manteniendo una
resolución de 1920x1080.
modo pixelado
Otra característica de Canvas
es el preajuste "pixelado". ¡Úsalo para hacer juegos retro
de estilo 8 bits o 16 bits!
Este preajuste hará que el lienzo se ajuste a la pantalla, a menos que especifiques un multiplicador. Por ejemplo, "pixelado x2" creará un lienzo que se muestra al doble del tamaño del ancho y alto especificados.
Para mostrar todos los sprites en coordenadas enteras, establece allSprites.pixelPerfect
en verdadero y usa coordenadas enteras para la posición y el zoom de la cámara.
Ten en cuenta que las fuentes modernas están basadas en vectores, por lo que no se verán muy bien en
modo pixelado. Carga en su lugar una fuente de mapa de bits con la función loadFont
de
p5.js.
Cambio de tamaño
Las funciones resizeCanvas
o canvas.resize
cambian el tamaño del lienzo a
un ancho y alto especificados.
Visualmente, el lienzo se reducirá o ampliará al nuevo tamaño. Los sprites no cambiarán de posición.
Si prefieres mantener la cámara enfocada en la misma área, entonces debes ajustar manualmente la posición de la cámara después de llamar a esta función.