p5.js resizeCanvas()用法及代碼示例

resizeCanvas()函數用於將畫布調整為參數指定的高度和寬度。調整大小後，畫布將立即重繪，除非可選的“ noRedraw”參數設置為true。

用法:

resizeCanvas(w, h, [noRedraw])

參數：此函數接受上述和以下所述的三個參數：

w:它是一個數字，代表新畫布的寬度。
h:它是代表新畫布高度的數字。
noRedraw:它是一個布爾值，它指定在調整大小後是否立即重繪畫布。

下麵的示例說明了p5.js中的resizeCanvas()函數：

範例1：在此示例中，我們固定了增加大小。

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); 
}

輸出：
output of above code
範例2：在此示例中，大小取決於點擊位置。

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); 
}

輸出：
output of avobe code

在線編輯：
環境設置：

參考： https://p5js.org/reference/#/p5/resizeCanvas

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | resizeCanvas() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。