p5.js | pan()函数

在p5.js中，pan()函数用于平移canvas（画布）上的元素以使其在画布中移动。该函数需要传入两个参数：x和y，分别代表横向和纵向的平移距离。

语法

pan(x, y);

• x：横向的平移距离，可以为正数或负数
• y：纵向的平移距离，可以为正数或负数

示例

以下示例演示如何使用pan()函数将画布上的元素向下移动50个像素。

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

function draw() {
  background(220);
  fill(0);
  rect(100, 100, 50, 50);
}

function mousePressed() {
  pan(0, 50);
}

在上述示例中，当鼠标点击画布时，pan()函数将画布上所有元素向下移动50个像素。

注意事项

• pan()函数只能用于画布元素，不能用于单个形状的平移
• pan()函数会影响画布上所有元素的位置，包括之前已经画好的元素
• 需要先调用createCanvas()函数创建画布，否则无法使用pan()函数

参考链接

• p5.js Reference