Javascript 画布中字体字符的几何旋转

我有这个，我想做的是，在翻译时，在每个字体字符的中心点上平滑地旋转它。我对画布世界很陌生，我真的不知道如何做到这一点

我试着这样做，但它的行为似乎很奇怪：

Draw: function () {
                //tried to add this line :
               context.rotate(Math.PI / 4);

                context.font = this.size + "px FontAwesome";
                context.fillStyle = this.color;
                context.strokeStyle = this.color;
                if (this.id % 2 == 0) {
                    context.fillText(this.icon, this.x, this.y);
                } else {
                    context.strokeText(this.icon, this.x, this.y);
                }
            }

---

有什么想法吗？每个字符也可以有自己的旋转速度吗？

默认情况下，文本是用

textAlign='start'

和

textbeliness='alphatic'

绘制的。因此

fillText（“g”，20,50）

将单个字符向左齐平（在x=20时），并允许字符下降到y=50以下

如果要以指定的[x，y]为中心绘制文本，可以设置

textAlign

和

textbeline

// text will be horizontally centered around the specified x in filltext
textAlign='center';

// text will be vertically centered around the specified y in filltext
textBaseline='middle';

要旋转角色，请执行以下操作：

上下文。将

平移到所需的x，y中心

上下文。旋转

至所需角度

context.fillText（yourCharacter，0,0）

在画布上绘制角色。在0,0处绘制，因为已使用

上下文.translate

命令将原点移动到x，y

可以使用requestAnimationFrame设置角色旋转的动画

将旋转角色的代码放入函数：

函数rotateCharacter（）

。发送字符居中和旋转所需的参数：

character

，

centerX

，

centerY

，

radiangle

然后创建另一个为角色旋转设置动画的函数：

function animate（）

在动画功能中：

清除画布：

context.clearRect

调用旋转函数来绘制旋转后的字符

更新下一个动画帧的旋转角度

请求动画继续：

requestAnimationFrame

下面是示例代码和演示：

//画布变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//设置画布文本样式
ctx.font='30px verdana'；
ctx.textAlign='center'；
ctx.textbrealine='middle'；
//字符变量
var字符='M'；
var centerX=50；
var centerY=50；
弧度角=0；
//开始制作动画
请求动画帧（动画）；
函数旋转字符（文本、中心X、中心Y、弧度角）{
//平移到要围绕其旋转的中心点
ctx.translate（20,50）；
//按所需角度旋转
旋转（弧度角）；
//在画布上绘制文本
ctx.fillText（'M'，0,0）；
//始终清理--将转换重置为默认值
setTransform（1,0,0,1,0,0）；
}
函数动画（时间）{
//清理画布
ctx.clearRect（0,0，cw，ch）；
//在centerX、centerY旋转并居中绘制角色
旋转字符（字符、中心X、中心Y、弧度角）；
//更新下一次的旋转角度
弧度角+=Math.PI/45；
//请求另一个动画帧
请求动画帧（动画）；
}

body{背景色：象牙；}
#画布{边框：1px纯蓝色；边距：0自动；}

围绕指定中心点旋转的字符

默认情况下，文本是用

textAlign='start'

和

textbelineline='alphasoric'绘制的。因此
fillText（“g”，20,50）
将单个字符向左齐平（在x=20时），并允许字符下降到y=50以下

如果要以指定的[x，y]为中心绘制文本，可以设置
textAlign
和
textbeline

// text will be horizontally centered around the specified x in filltext
textAlign='center';

// text will be vertically centered around the specified y in filltext
textBaseline='middle';

要旋转角色，请执行以下操作：

上下文。将
平移到所需的x，y中心
上下文。旋转
至所需角度
context.fillText（yourCharacter，0,0）
在画布上绘制角色。在0,0处绘制，因为已使用
上下文.translate
命令将原点移动到x，y
可以使用requestAnimationFrame设置角色旋转的动画

将旋转角色的代码放入函数：
函数rotateCharacter（）
。发送字符居中和旋转所需的参数：
character
，
centerX
，
centerY
，
radiangle

然后创建另一个为角色旋转设置动画的函数：
function animate（）

在动画功能中：

清除画布：
context.clearRect
调用旋转函数来绘制旋转后的字符
更新下一个动画帧的旋转角度
请求动画继续：
requestAnimationFrame
下面是示例代码和演示：


//画布变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//设置画布文本样式
ctx.font='30px verdana'；
ctx.textAlign='center'；
ctx.textbrealine='middle'；
//字符变量
var字符='M'；
var centerX=50；
var centerY=50；
弧度角=0；
//开始制作动画
请求动画帧（动画）；
函数旋转字符（文本、中心X、中心Y、弧度角）{
//平移到要围绕其旋转的中心点
ctx.translate（20,50）；
//按所需角度旋转
旋转（弧度角）；
//在画布上绘制文本
ctx.fillText（'M'，0,0）；
//始终清理--将转换重置为默认值
setTransform（1,0,0,1,0,0）；
}
函数动画（时间）{
//清理画布
ctx.clearRect（0,0，cw，ch）；
//在centerX、centerY旋转并居中绘制角色
旋转字符（字符、中心X、中心Y、弧度角）；
//更新下一次的旋转角度
弧度角+=Math.PI/45；
//请求另一个动画帧
请求动画帧（动画）；
}
body{背景色：象牙；}
#画布{边框：1px s