P5 画布下的元素 - Javascript

P5.js是一个基于Processing语言的Javascript库，主要用于创作可视化艺术和交互式图形。它提供了一个画布(canvas)，并支持在画布上绘制各种元素。

基本使用

在html文件中引用p5.js库后，可以在js文件中创建画布并绘制元素。以下是创建一个宽为400像素、高为400像素的画布的示例：

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

function draw() {
  background(220);
}

这个例子中，createCanvas函数创建了一个宽为400像素、高为400像素的画布，并通过background函数填充了画布的背景颜色为灰色(220)。

接下来，我们可以在setup函数或draw函数中，通过各种方法来绘制不同的图形和元素。

常用绘制元素

矩形

rect函数可用于绘制矩形，语法如下：

rect(x, y, w, h);

其中，x、y表示矩形的左上角坐标；w、h表示矩形的宽度和高度。

例如，下面示例代码将在画布上绘制一个位于(50,50)的宽为100像素、高为50像素的蓝色矩形：

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

function draw() {
  background(220);
  fill(0, 0, 255); // 填充颜色为蓝色
  noStroke(); // 不绘制矩形边框
  rect(50, 50, 100, 50);
}

圆形

ellipse函数可用于绘制圆形，语法如下：

ellipse(x, y, w, h);

其中，x、y表示圆形的中心点坐标；w、h表示圆形的宽度和高度。

例如，下面示例代码将在画布上绘制一个位于中心的半径为50像素、填充颜色为红色的圆形：

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

function draw() {
  background(220);
  fill(255, 0, 0); // 填充颜色为红色
  noStroke(); // 不绘制圆形边框
  let centerX = width/2; // 计算圆心横坐标
  let centerY = height/2; // 计算圆心纵坐标
  let r = 50; // 圆形半径
  ellipse(centerX, centerY, r*2, r*2);
}

文字

text函数可用于绘制文字，语法如下：

text(str, x, y);

其中，str为要绘制的字符串；x、y表示字符串的左下角坐标。

例如，下面示例代码将在画布上绘制一个位于左上角、填充颜色为黑色、大小为20像素的文字：

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

function draw() {
  background(220);
  fill(0); // 填充颜色为黑色
  textSize(20); // 字体大小为20像素
  text("Hello World!", 0, 20);
}

其他常用函数

颜色设置函数

以下是设置颜色的函数：

• fill(r, g, b)：设置填充颜色
• stroke(r, g, b)：设置绘制边框颜色
• strokeWeight(w)：设置边框线条粗细

其中，三个参数的取值范围均为0~255。

尺寸设置函数

以下是设置尺寸的函数：

• createCanvas(w, h)：创建画布
• width()：获取画布宽度
• height()：获取画布高度

其他函数

• random(min, max)：获取[min,max)中随机数
• frameRate(fps)：设置帧率

总结

本文介绍了p5.js画布下的常用绘制元素和常用函数。通过这些函数，我们可以在画布上绘制出各种丰富的交互式图形，创造出更加生动有趣的交互体验。