下载掌阅APP，畅读海量书库
立即打开
p5.js还包含很多系统变量，它们经常被使用。例如，例3-3直接使用名为width和height的系统变量，它们可以获取到画布的宽度值和高度值。
例3-3 width和height系统变量
系统变量不需要创建或赋值，width和height系统变量会根据createCanvas函数中的参数来判断画布的尺寸，并自动进行赋值（效果图如图3.4所示）。
图3.4 例3-3效果图
可以尝试改变createCanvas函数的参数来改变画布宽度和高度，然后重新刷新页面，看看会发生什么事情，这样可以更好地理解width和height系统变量。
例3-4 帧速率与鼠标位置
帧速率（frameRate）和鼠标位置（mouseX，mouseY）也是常用到的系统变量。运行本例看看这几个系统变量的作用，尝试改变frameRate函数的参数，会获得不一样的效果（效果图如图3.5所示）。
图3.5 例3-4效果图
上面两张图分别是帧速率为5帧/秒和帧速率为60帧/秒时鼠标指针在画布上移动时所绘制的图形。帧速率越高，绘制的圆形越密集，整体感觉越流畅。
除此之外，p5.js还有很多其他的系统变量，如键盘的相关操作等，这些变量会在后面的章节进行详细讲解。