根據變量在JavaScript中創建畫布（使用p5.js）

Question

我想基於變量繪制一個簡單的畫布。

它是這樣的：

function setup() {
   createCanvas(600, 600);
   background(50);
}

為什么這樣不起作用？ （顯示的是一塊小畫布，絕對不會顯示600x600）：

var height = 600;
var width = 600;

function setup() {
    createCanvas(height, width);
    background(50)
}

感謝您的幫助！

Answer 1

它不起作用，因為height和width是內置的p5變量名稱。 嘗試將它們重命名為其他名稱。

var a = 600;
var b = 600;

function setup() {
    createCanvas(a, b);
    background(50)
}

如果要使畫布大小windowWidth窗口大小，則應使用windowWidth和windowHeight 。

function setup() {
  createCanvas(windowWidth, windowHeight);
}

要在設置后調整畫布的大小，您應該執行以下操作：

var c;

function setup() {
  c = createCanvas(windowWidth-20, windowHeight-20);
}

function draw() {
  background(30);
}

function mousePressed() {
    c.size(windowWidth-20, windowHeight-20);
    console.log(width + " " + height);
}

Answer 2

從我從p5.js庫中學到的知識中，我確實相信width和height變量專用於createCanvas()創建的畫布，並且是系統變量，重命名這些變量很可能會解決問題。