javascript - 基于变量在 JavaScript 中创建 Canvas (使用 p5.js)

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 是内置的 p5 变量名称。尝试将它们重命名为其他名称。

var a = 600;
var b = 600;

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

如果您希望使 Canvas 与窗口大小相同，则应使用 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);
}