怎样让HTML5 Canvas中的独立元素旋转？

嗯， 当前这个问题挺有意思的，最主要是关于在html5 canvas里面怎么让某个图形自己旋转，而不作用于到其他的图形。

先来看， 你得了解Canvas 2D API的一些基本操作

Canvas 2D API 提供给了一堆方法来管理绘图状态，比如save和restore。 说到点子上了。 这两个方法超级有用，能够用来隔离变换状态。

直接调用rotate等变换方法会改变整个绘图上下文的当前变换矩阵，从而作用于后续的全部绘图操作。为了不作用于其他图形，我们需要用save和restore来隔离这一些局部变换，我怀疑...。

来看个例子

const canvas = document.getElementById;
const ctx = canvas.getContext;
// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 绘制一个蓝色的矩形， 并使其旋转
ctx.save; // 保存当前画布状态
ctx.translate; // 平移到画布中心
ctx.rotate; // 旋转 30 度 
ctx.fillStyle = "blue";
ctx.fillRect;
ctx.restore; // 恢复到旋转前的画布状态
// 绘制其他红色的矩形，它们不受蓝色矩形旋转的作用于
ctx.fillStyle = "red";
ctx.fillRect;
ctx.fillRect;

代码阐述：

等着瞧。 先来看，我们通过getElementById获取canvas元素，然后用getContext获取2D绘图上下文。

然后我们设置了画布的尺寸为窗口的内较宽和内较高。

基本操作流程：

1. save: 保存当前画布状态。
2. translate: 将画布原点平移到。
3. rotate: 落实旋转操作，angle单位是弧度。
4. fillStyle = color: 设置填充颜色。
5. fillRect: 在崭新的原点周围绘制矩形。
6. restore: 回复到上一次保存的状态，避免后续绘图受作用于。

怎样实现围绕自定义点的旋转？

这事儿我可太有发言权了。 通常，我们希望围绕元素的中心点进行旋转，而不是画布的原点。这需要结合, , , , 方法。 会将画布的原点移动到。 举个例子， 要围绕一个矩形的中心点旋转，我们能够将画布原点平移到矩形的中心，然后落实旋转，最后再来看将矩形绘制在崭新的原点周围。

// 定义蓝色矩形的尺寸
const rectWidth = canvas.width / 3;
const rectHeight = canvas.height / 3;
ctx.save; // 保存当前画布状态
//平移
//虚假设矩形原本位于到
//它的中心店时
ctx.translate;
//落实旋转30度 
ctx.rotate; 
//绘制矩形， 使其中心位于崭新的原店
// 矩形的左上角坐标变为
ctx.fillStyle="blue";
ctx.fillRect;
restore;//恢复到上一次保存的状态
//再绘制两个红色矩形，不会收到蓝色矩形的作用于。
fillStyle="red";
fillRect;
fillRect;
   

总之呢， 就是利用良好, ,还有

对，就这个意思。 嗯，较大概就是这样，希望对你有协助。看不懂的话，更多看几遍吧，反正我是没看懂我自己写的啥。。。

怎么样，是不是感觉有点乱糟糟的？🤪