绘制一个矩形。
矩形是由 x
、y
、w
和 h
参数定义的四边形。 x
和 y
设置其左上角的位置。 w
设置其宽度,h
设置其高度。矩形中的每个角都是 90˚。请参阅 rectMode() 了解其他定义矩形的方式。
带有五个参数的 rect()
版本创建一个圆角矩形。第五个参数设置所有四个角的圆角半径。
带有八个参数的 rect()
版本也创建一个圆角矩形。最后四个参数中的每一个设置一个角的圆角半径。这些半径从左上角开始顺时针绕矩形移动。如果省略了其中任何参数,它们将采用上一个设置的值作为圆角半径。
示例
语法
rect(x, y, w, [h], [tl], [tr], [br], [bl])
rect(x, y, w, h, [detailX], [detailY])
参数
矩形的 x 轴坐标。
矩形的 y 轴坐标。.
矩形的宽度。
矩形的高度。
可选参数,左上角的圆角半径。
可选参数,右上角的圆角半径。
可选参数,右下角的圆角半径。
可选参数,左下角的圆角半径。
在 x 方向的分段数(WebGL 模式下)。
在 y 方向的分段数(WebGL 模式下)。
相关参考
arc
绘制一个圆弧。 圆弧是一个由参数 x、y、w 和h 定义的椭圆的一部分。 x 和 y 设置圆弧的中心。 w 和 h 设置圆弧的宽度和高度。 移步 ellipse() 和 ellipseMode() 了解更多详细信息。 第五和第六个参数,start 和 stop 用于设置圆弧的起止点所对应的角度。圆弧始终以顺时针方向从 start 到 stop 绘制。 第七个参数,mode,是可选的。它决定了圆弧的填充样式。填充样式可以是开放式半圆(OPEN)、封闭式 半圆(CHORD),或闭合饼图(PIE)。 第八个参数,detail,也是可选的。它决定了会有多少顶点用于在WebGL 模式下绘制圆弧。默认值为 25。.
circle
画一个圆。 圆是一个由 x、y、 和 d 参数确定的。 x 和 y 设置其中心点的位置。d 设置其宽度和高度(直径)。圆边缘上的每个点到其中心点的距离都是 d。移步 ellipseMode() 查看其他设置其位置的方式。.
ellipse
绘制一个椭圆。 椭圆是一个由 x、y、 w 和 h 参数设置的圆形。 x 和 y 设置其中心点。 w 和 h 设置其宽度和高度。移步 ellipseMode() 查看其他设置椭圆位置的方式。 如果未设置高度,则椭圆的宽度和高度均使用宽度值。如果指定了为负数的高度或宽度,则其绝对值将被采用。 第五个参数detail也是可选的。它决定了有多少顶点会被用于在 WebGL 模式下绘制椭圆。默认值为 25。.
line
在两个点之间绘制一条线段。 线段的默认粗细为 1 个像素。当向 line() 传入 4 个参数时将在 2D 模式下绘制一条线段。使用 stroke() 函数可以给一条线段上色。使用 strokeWeight() 函数可以调整线段的粗细。线段不能被填充颜色,因此 fill() 函数不会影响其颜色。 当向 line() 传入 6 个参数时将在 3D 空间中绘制。要这样做时,需要在调用 createCanvas() 传入 WEBGL 参数。.