基于变量在 JavaScript 中创建画布(使用 p5.js) [英] Creating a canvas in JavaScript based on variables (with p5.js)

问题描述

我想根据变量绘制一个简单的画布.

I want to draw a simple canvas based on variables.

它是这样工作的:

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

为什么这不起作用?(一个小画布，绝对不是600x600显示的):

Why does that not work? (a small canvas, definitely not 600x600 is displayed):

var height = 600;
var width = 600;

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

感谢您的帮助！

推荐答案

它不起作用，因为 height 和 width 是内置的 p5 变量名称.尝试将它们重命名为其他名称.

It doesnt work because height and width are built-in p5 variable names. Try renaming them to something else.

var a = 600;
var b = 600;

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

如果你想让画布和窗口一样大，你应该使用 windowWidth 和 windowHeight.

If you are looking to make the canvas the size of the window, you should use windowWidth and windowHeight.

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

要在设置后调整画布大小，您应该执行以下操作:

To resize the canvas after setup you should do something like this:

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

这篇关于基于变量在 JavaScript 中创建画布(使用 p5.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！