使用 javascript 在画布中旋转文本答案

【问题标题】：Rotate text in a canvas with javascript使用 javascript 在画布中旋转文本
【发布时间】：2014-01-18 21:57:58
【问题描述】：

在下面的代码中，我想在 javascript 中旋转数组中每个元素的文本。如果我在填充文本之前使用例如ctx.rotate(Math.PI/10)，它会旋转所有元素。文本的位置也会随着ctx.rotate(Math.PI/10) 而变化，如果我使用 90 度，ctx.rotate(Math.PI/2) 文本不会显示在画布上。

<html>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = new Array("Day1","Day2","Day3","Day4","Day5");

    ctx.rotate(Math.PI/10);
        for(var i = 0; i < x.length; i++){
            ctx.fillText(x[i],i*50+20,50);      
        }   


</script>
</html>

正如我所说，我想自己旋转每个元素，并且每个元素的位置应该与上面代码中的非旋转文本中的位置相同。因此，每个元素都必须围绕自己的轴旋转。我怎样才能做到这一点？

【问题讨论】：

你应该定义一个 tau 常量。

标签： javascript html canvas rotation

【解决方案1】：

演示：http://jsfiddle.net/m1erickson/YyN2P/

简要概述：

context.translate 到您希望文本旋转点的位置
context.rotate
context.fillText，X 偏移 == 文本宽度的 1/2，Y 偏移 == 文本高度的 1/2
（可以通过context.measureText来测量文字宽度）
将所有这些都包含在 context.save 和 context.restore 中。
使用 requestAnimationFrame 驱动您的动画。

还有一些示例代码：

var word1="Day1";
var word1Width=ctx.measureText(word1).width;

var r=0;
animate();

function animate(){
    requestAnimationFrame(animate);
    r+=Math.PI/180;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(100,100);
    ctx.rotate(r);
    ctx.fillText(word1,-word1Width/2,4);
    ctx.restore();
}

【讨论】：

所以你只是将文本高度的一半硬编码为 4px？

【解决方案2】：

已对您的代码进行了一些更改，应该会有所帮助：

<html>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid 

#d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = new Array("Day1","Day2","Day3","Day4","Day5");
       for(var i = 0; i < x.length; i++){
            var size = ctx.measureText(x[i]);
    ctx.save();
    var tx = (i*50+20) + (size.width/2);
    var ty = (50);
    ctx.translate(tx,ty);
    ctx.rotate(Math.PI / 10);
    ctx.translate(-tx,-ty);
            ctx.fillText(x[i],i*50+20,50);
    ctx.restore();
        }   
</script>
</html>

【讨论】：