javascript - 如何旋转画布以使先前绘制的形状也随旋转的上下文一起移动

Question

我有这个方法试图在 mouseMove 事件上旋转画布，虽然我能够旋转它，但之前在上下文中绘制了一些形状

我的最终目标：我需要这个画布来旋转，并且要旋转的图纸、形状以及我想要制作的任何后续注释都应该在旋转的形状上，但是当我点击刷新和旋转未完成时，这些形状应该正好在哪里它们是在旋转的上下文中绘制的

rotateCanvas = (context, canvas, newCtx, newCanvas) => {
   //canvas and newCanvas are drawn on the same canvas element
   newCanvas.width = canvas.width;
   newCanvas.height = canvas.height;
   newCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
   context.clearRect(0, 0, canvas.width + 2, canvas.height + 2);
   context.fillStyle = 'black';
   context.fillRect(0, 0, canvas.width, canvas.height);
   context.translate(canvas.width / 2, canvas.height / 2);
   context.rotate(this.diffAngleRotated);
   context.translate(-canvas.width / 2, -canvas.height / 2);
   context.drawImage(newCanvas, 0, 0, canvas.width, canvas.height);
   context.setTransform(1, 0, 0, 1, 0, 0);
 };

---

旋转和未旋转的图像

标签： javascriptreactjshtml5-canvas