使用p5.js绘制一个旋转的正方形供参考。详情如下

要恢复的渲染

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。

首先，建立画布大小，比例应该是5: 3

函数设置(){ createCanvas(500，300)；}设置矩形的绘制格式和边缘的厚度

函数设置(){ createCanvas(500，300)；矩形模式(100)；斯特洛克威特(4)；}我们先根据画布坐标绘制静态图形

(有关颜色的rgb数据可以通过ps颜色选择器获得)

只需使用rect()进行绘制

仔细观察，可以发现图中的矩形是一个圆角矩形。要画圆角矩形，可以把四个角的弧度直接加到rect()，以左边的黑色矩形为例

rect(77.5，122.5，55，55，[5]，[5]，[5]，[5])；In []是每个角的圆角弧度，依次为左上角、右上角、左下角和右下角

修改后的图像

目前，基本图已经构建完成。目前我们需要做的是让它旋转。这里需要几个功能

平移()旋转()

我们用translate()将旋转中心设置为矩形的中心，然后调用rotate()旋转图像，但是会发现一个问题。设置好之后，我们会启动程序，会发现整个图形都被旋转了，没有达到想要的效果，所以现在需要使用push()和pop()函数来分隔矩形

push()；角度=角度0.01；设c=角度PI；翻译(100，150)；旋转(c)；中风(255，255，255)；填充(0，0，0)；rect(-22.5-22.5，55，55，[5]，[5]，[5]，[5])；pop()；运行以旋转左侧的第一个矩形。需要说明的是，角度后的增加值(这里是0.01)代表旋转速率的大小

如果需要反向旋转，请将rotate()中的参数转换为负数

按照第一个矩形换另外三个矩形，就能得到图中的效果！

最终结果

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。