这里fillText直接使用rotate会有问题。估计是旋转中心有问题。
正确的逻辑为：
先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。
如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。
程序运行截图如下：
绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。
代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 1980;
- canvas.height = 1024;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.fillStyle = "green";
- context.fillText("中文ABCDEFG", 400, 400);
-
- context.save();
- context.translate(400, 400);
- context.rotate(90 * Math.PI / 180);
- context.fillStyle = "red";
- context.fillText("中文ABCDEFG", 0, 0);
- context.restore();
-
- //中心位置旋转
- let strWidth = context.measureText("中文ABCDEFG").width;
- console.log("strWidth:" + strWidth);
- context.save();
- context.translate(400 + strWidth / 2, 400 - strWidth / 2);
- context.rotate(90 * Math.PI / 180);
- context.fillStyle = "blue";
- context.fillText("中文ABCDEFG", 0, 0);
- context.restore();
- }
-
- </script>
-
- </body>
- </html>
