Canvas 画布旋转时在p5.js画布上绘制

我正在使用p5.js模拟绘图机，类似于

我已经创建了手臂相对于电机位置的位置。我试图重现的想法是，拿着一支铅笔/钢笔，然后用它在下面的旋转画布上画画。我在p5.js编辑器中创建了一个测试

这幅画画了两个点，一个红色，一个蓝色。目标是使用下面旋转图形对象上的蓝点创建标记或轨迹

函数设置（）{
createCanvas（400400）；
背景（255）；
img=createGraphics（200200）；
img.背景（150）；
模拟冲程重量（3）；
//矩形模式（中心）；
}
函数绘图（）{
背景（“浅黄色”）；
翻译（100100）；
图像背景（“浅蓝色”）；
img.push（）；
img.翻译（100100）；
图像旋转（弧度（帧数））；
装填（240）；
假性鼻窦炎（）；
img.rect（-50，-50100100）；
模拟冲程重量（4）；
模拟中风（“红色”）；
模拟点（20,20）；
img.pop（）；
模拟中风（“蓝色”）；
模拟冲程重量（4）；
模拟点（100,80）；
图像（img，0,0）；
}

---

实现示例草图的一种方法是以相同的速率旋转图形对象和草图。我重写了您的一些代码以实现此目标，但应该没有太大区别：

let rotatingRect；
函数设置（）{
createCanvas（400400）；
rotatingRect=createGraphics（100100）；
旋转直线背景（240）；
旋转直行程重量（4）；
旋转直线笔划（“红色”）；
旋转直点（20,20）；
}
函数绘图（）{
仰泳（）；
背景（“浅黄色”）；
填充（“浅蓝色”）；
rect（100100200200）；
旋转直线笔划（“蓝色”）；
推（）；
翻译（200200）；
旋转（弧度（帧数））；
旋转直推（）；
旋转直线平移（50,50）；
rotatingRect.rotate（-radians（frameCount））；
旋转直点（mouseX-200、mouseY-200）；
//旋转直点（0，-10）；
旋转rect.pop（）；
图像（旋转矩形，-50，-50）；
pop（）；
}

---

我不太清楚你在问什么。这段代码与您期望的有什么不同？请参阅Julian的答案。这正是我想要的。这是一个很好的例子，谢谢！我没有想过要旋转整个画布，并将矩形旋转相反的量。这就是我如何实现在画图时将纸张“向上”移动的效果，它也很容易转换为旋转。很好。希望能有所帮助。