HTML5如何使文字围绕中心点旋转

Question

HTML5如何使文字围绕中心点旋转

7

我在画布中旋转文本时遇到了一些问题，无法绕中心点旋转。以下是我的代码尝试解决这个问题：

var textPositions = context.measureText(this.Text);

    context.save();

    context.translate(this.XPos + (textPositions.width / 2), this.YPos);
    context.rotate( (Math.PI / 180) * this.RotateSpeed );
    context.font = this.FontSize + "px " + this.FontStyle;
    context.fillText(this.Text, 0, 0);
    context.translate(-(this.XPos + (textPositions.width / 2)), -(this.YPos));

    context.restore();

这个文本只是“Hello world！” this.XPos = 65; this.YPos = 100。

这里有一张图片，其中包含非旋转文本和旋转文本， enter image description here 我计算中心点的方法有误吗？

- Canvas

它似乎围绕左下角点（H的底部）旋转。请参阅https://dev59.com/_HA75IYBdhLWcg3wrbC_以获取相关讨论和答案。 - Rajkumar Madhuram

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

这里有一种方法：

- 使用textAlign和textBaseline将文本绘制在其水平和垂直中心位置： - translate到您想要文本居中的x，y位置。 - 旋转所需的角度 - 最后使用fillText

示例代码和演示：http://jsfiddle.net/m1erickson/uL62et9y/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var cw=canvas.width;
    var ch=canvas.height;

    ctx.beginPath();
    ctx.moveTo(cw/2,0);
    ctx.lineTo(cw/2,ch);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0,ch/2);
    ctx.lineTo(cw,ch/2);
    ctx.stroke();

    ctx.save();

    ctx.textAlign="center";
    ctx.textBaseline="middle";

    ctx.translate(150,150);
    ctx.rotate(Math.PI/2);
    ctx.fillText("Hello World!",0,0);

    ctx.restore();

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>