根据变量（使用 p5.js）在 JavaScript 中创建 canvas

Question

我想根据变量画一个简单的canvas。

它是这样工作的：

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

为什么那不起作用？（显示小canvas，绝对不是600x600）：

var height = 600;
var width = 600;

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

感谢任何帮助！

Answer 1

它不起作用，因为 height 和 width 是 built-in p5 变量名。尝试将它们重命名为其他名称。

var a = 600;
var b = 600;

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

如果您希望 canvas 的大小与 window 的大小相同，您应该使用 windowWidth 和 windowHeight。

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

要在设置后调整 canvas 的大小，您应该这样做：

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 变量专用于由 [=12 创建的 canvas =] 并且是系统变量，重命名这些变量很可能会解决问题。

根据变量（使用 p5.js）在 JavaScript 中创建 canvas

Creating a canvas in JavaScript based on variables (with p5.js)

javascript

canvas

p5.js