Question

我在画布的中心点旋转一段文字时遇到了一些麻烦，这是我尝试解决问题的代码

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();

this.Text就是“Hello world！” this.XPos = 65; this.YPos = 100，

这是一张带有非旋转文字和旋转文字的图片， enter image description here 我的中心点错了吗？

Answer 1

以下是一种方式：

使用textAlign＆amp; textBaseline在其水平和垂直中心绘制文字：
translate到x，y，您希望文本居中。
rotate所需的角度
最后fillText

enter image description here

示例代码和演示：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>

HTML5围绕它的中心点旋转文本

1 个答案: