P5.js | size()函数

简介

size()是P5.js中用于设置画布大小的函数，程序员可以使用该函数来指定画布的宽度和高度。该函数通常在 setup() 函数中调用。

语法：

size(width, height, [renderer]);

• width: 画布宽度，以像素为单位（数字）
• height: 画布高度，以像素为单位（数字）
• renderer: 可选参数，指定渲染器类型，如P2D、WEBGL等（字符串）

使用示例

下面是一个简单的使用 size() 函数来设置画布大小的例子：

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
}

在上面的例子中，我们使用 createCanvas() 函数来创建画布，并传递两个参数 400 和 400 作为宽度和高度，从而设置了画布的大小。在 draw() 函数中，我们使用 background() 函数来设置画布背景颜色。

更多示例

size()函数可以搭配其他的函数和特性实现更加复杂的效果。下面是一些示例：

使用渲染器

你可以在 size() 函数中指定渲染器类型，从而实现更加复杂的图形效果。下面的示例使用 WEBGL 渲染器来呈现一个3D球体：

function setup() {
    createCanvas(400, 400, WEBGL);
}

function draw() {
    background(220);
    noStroke();
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    sphere(100);
}

在上面的示例中，我们在 createCanvas() 方法中传递了第三个参数 WEBGL，这样我们就可以使用WebGL渲染器，并使用 sphere() 函数绘制3D球体。 noStroke() 函数被用来去除球体周围的边框，并使用 rotateX() 和 rotateY() 函数来旋转球体。

自适应窗口大小

你可以使用 windowWidth 和 windowHeight 变量来设置画布自适应窗口大小。在下面的示例中，我们使用 size() 函数设置画布大小，以及 windowResized() 函数来监听窗口大小变化。

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

function draw() {
    background(220);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

在上面的示例中，我们将 createCanvas() 函数的参数设置为 windowWidth 和 windowHeight，以使画布的大小与窗口大小相匹配。在 draw() 函数中，我们使用 background() 函数来设置画布背景颜色。当窗口大小发生变化时，windowResized() 函数将被调用，重新设置画布大小。

结论

size() 函数是P5.js中一个十分实用的函数，可以用来设置画布大小，搭配其他的函数和特性，我们可以实现更加复杂的图形效果。希望以上内容可以对P5.js程序员有所帮助。