Question

我想从其中心位置旋转带有动态X，Y值的HTML5画布文本。我使用了stackoverflow链接HTML5 rotate text around it's centre point中提到的以下代码。但是文本总是从起点开始旋转。我需要从中心点旋转。这是我的代码。

 this.ctx.textAlign = "center";
 this.ctx.textBaseline = "middle";
 this.ctx.translate(options.x , options.y);
 this.ctx.rotate(options.labelRotation * Math.PI / 180);
 this.ctx.fillText(label, 0, 0);

任何人都让我知道如何从文本的中心点旋转文本。

谢谢， Bharathiraja。

Answer 1

您的代码正在运行：http://jsfiddle.net/m1erickson/d40xr8nL/

如果它不能正常工作：

确保您的选项属性有效。
将代码包装在ctx.save＆amp; ctx.restore（因为转换是累积的）。

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="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 x=150;
    var y=150;
    var labelRotation=45;
    var label="This is some text.";

    animate();

    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //
        ctx.beginPath();
        ctx.arc(x,y,3,0,Math.PI*2);
        ctx.closePath();
        ctx.fill();
        //
        ctx.save();
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.translate(x , y);
        ctx.rotate(labelRotation * Math.PI / 180);
        ctx.fillText(label, 0, 0);
        ctx.restore();
    }

    function animate(){
        requestAnimationFrame(animate);
        labelRotation++;
        draw();
    }

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

从中心点旋转html5画布文本

1 个答案: