HTML5围绕其中心点旋转文本
Can*_*vas 3 html javascript canvas rotation
我在通过中心点旋转画布中的一段文本时遇到了一些问题，这是我尝试解决问题的代码
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,
这是一张带有非旋转文本和旋转文本的图片，
我算错了中心点吗？
这是一种方法：
使用
textAlign&textBaseline在其水平和垂直中心绘制文本：translate到您希望文本居中的 x,y。rotate通过所需的角度最后
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>
- 是的，我所需要的只是“context.textAlign =“center”;” :) 为答案欢呼 (2认同)