Question

在下面的代码中，我想在javascript中旋转数组中每个元素的文本。如果我在filltext之前使用例如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>

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

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

Answer 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>

使用javascript在画布中旋转文本

2 个答案: