La función resizeCanvas() se usa para cambiar el tamaño del lienzo a la altura y el ancho dados como parámetros. El lienzo se vuelve a dibujar inmediatamente después de que se cambia el tamaño, a menos que el parámetro opcional ‘noRedraw’ se establezca en verdadero.
Sintaxis:
resizeCanvas(w, h, [noRedraw])
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- w: Es un número que representa el ancho del nuevo lienzo.
- h: Es un número que representa la altura del nuevo lienzo.
- noRedraw: es un valor booleano que especifica si el lienzo se vuelve a dibujar inmediatamente cuando se cambia el tamaño.
El siguiente ejemplo ilustra la función resizeCanvas() en p5.js:
Ejemplo 1: En este ejemplo, arreglamos el tamaño de aumento.
function setup() { createCanvas(200, 200); textSize(16); rect(0, 0, height, width); background('green'); text("This is the canvas area", 20, 80); text("Canvas height: " + height, 25, 100); text("Canvas width: " + width, 25, 120); } function mouseClicked() { resizeCanvas(300, 300, true); rect(0, 0, height, width); background('green'); text("This is the canvas area", 50, 130); text("Canvas height: " + height, 50, 150); text("Canvas width: " + width, 50, 170); }
Salida:
Ejemplo 2: En este ejemplo, el tamaño depende de la posición del clic.
function setup() { createCanvas(200, 200); textSize(16); rect(0, 0, height, width); background('green'); text("Press anywhere to resize", 10, 20); text("Canvas height: " + height, 10, 40); text("Canvas width: " + width, 10, 60); } function mouseClicked(event) { // resize canvas to the resizeCanvas(event.x, event.y); rect(0, 0, height, width); background('green'); text("Press anywhere to resize", 10, 20); text("Canvas height: " + height, 10, 40); text("Canvas width: " + width, 10, 60); }
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/reference/#/p5/resizeCanvas
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA