欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

canvas笔记-文本（fillText）旋转（rotate）

发布时间：2025/3/15 编程问答 52 豆豆
生活随笔 收集整理的这篇文章主要介绍了 canvas笔记-文本（fillText）旋转（rotate） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

这里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("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>

 

总结

以上是生活随笔为你收集整理的canvas笔记-文本（fillText）旋转（rotate）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。