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

最新推荐文章于 2024-06-27 16:39:50 发布

liu__software

最新推荐文章于 2024-06-27 16:39:50 发布

阅读量3.6k

点赞数

分类专栏： canvas 文章标签： canvas

原文链接：https://blog.csdn.net/qq78442761/article/details/106621370

版权

canvas 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

这里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）_IT1995的博客-CSDN博客_canvas filltext旋转

liu__software

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas笔记-文本（fillText）旋转（rotate）

这里fillText直接使用rotate会有问题。估计是旋转中心有问题。正确的逻辑为：先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。程序运行截图如下：绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。代码如下：<!DOCTYPE html><html lang="en"><h.
复制链接

扫一扫

专栏目录