p5.js | función resizeCanvas()

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:
output of above code
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:
output of avobe code

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *