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>

 

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值