p5.js | 鼠标 | 鼠标X

简要介绍

在p5.js中，可以很方便地获取鼠标的位置信息，包括鼠标的x坐标和y坐标。鼠标位置信息可以用于各种不同的交互式应用和绘图效果。

获取鼠标的x坐标

要获取鼠标的x坐标，可以使用p5.js中的mouseX变量。这个变量会自动更新，以便始终包含鼠标的当前x坐标。可以随时读取此变量的值，以获取鼠标的x坐标。

let x = mouseX;

获取鼠标的y坐标

要获取鼠标的y坐标，可以使用p5.js中的mouseY变量。这个变量会自动更新，以便始终包含鼠标的当前y坐标。可以随时读取此变量的值，以获取鼠标的y坐标。

let y = mouseY;

绘制跟随鼠标的形状

使用鼠标位置信息可以创建各种不同的交互式绘图效果。例如，可以绘制一个形状，该形状跟随鼠标的位置移动。

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

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

在这个示例中，我们使用鼠标的x和y坐标来定义椭圆的位置。椭圆的中心始终位于鼠标的位置下，因此它会随着鼠标的移动而移动。

鼠标事件

除了读取鼠标位置信息之外，p5.js还提供了一些鼠标事件，可以在发生特定用户鼠标交互时触发。这些事件包括鼠标按下、鼠标松开、鼠标移动等。

下面是每一种鼠标事件的示例代码：

function mousePressed() {
  // 当鼠标按下时执行的代码
}

function mouseReleased() {
  // 当鼠标松开时执行的代码
}

function mouseMoved() {
  // 当鼠标移动时执行的代码
}

这只是一些事件的例子。p5.js提供了更多的鼠标事件，可以根据需要选择使用。

结论

在p5.js中，获取鼠标位置信息是非常简单的，并且可以用于各种不同类型的交互式应用和绘图效果。p5.js还提供了许多不同的鼠标事件，可以帮助您创建更具交互性的应用程序。