Javascript 从中心点旋转html5画布文本_Javascript_Html_Canvas

Javascript 从中心点旋转html5画布文本

javascript html canvas

Javascript 从中心点旋转html5画布文本,javascript,html,canvas,Javascript,Html,Canvas,我想从HTML5画布的中心位置旋转具有动态X，Y值的文本。我使用了stackoverflow链接中提到的以下代码。但文本总是从起点开始旋转。我需要从中心点旋转。这是我的密码 this.ctx.textAlign = "center"; this.ctx.textBaseline = "middle"; this.ctx.translate(options.x , options.y); this.ctx.rotate(options.labelRotation * Math.PI / 1

我想从HTML5画布的中心位置旋转具有动态X，Y值的文本。我使用了stackoverflow链接中提到的以下代码。但文本总是从起点开始旋转。我需要从中心点旋转。这是我的密码

 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.

您的代码正在运行：

如果在你这方面不起作用：

确保选项属性有效
将代码包装在ctx.save和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>


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var x=150；
变量y=150；
var-labelRotation=45；
var label=“这是一些文本。”；
制作动画（）；
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
//
ctx.beginPath（）；
弧（x，y，3，0，数学π*2）；
ctx.closePath（）；
ctx.fill（）；
//
ctx.save（）；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.translate（x，y）；
ctx.旋转（labelRotation*Math.PI/180）；
ctx.fillText（标签，0,0）；
ctx.restore（）；
}
函数animate（）{
请求动画帧（动画）；
labelRotation++；
draw（）；
}
}); // end$（函数（）{}）；