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