Rotate text in a canvas with javascript

问题

In the following code i want to rotate the text of each element of the array in javascript. If i use for example ctx.rotate(Math.PI/10) before the filltext, it rotates all the elements. The positioning of the text also changes with ctx.rotate(Math.PI/10) and if i use 90 degrees, ctx.rotate(Math.PI/2) the text does not show on the canvas.

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

As i said, i want to rotate each element on its own and with that the positioning of each element should stay the same as in the non-rotated text as in the code above. Thus each element has to rotate around its own axis. How can i achieve this?

回答1:

Have made some changes in your code, it should help:

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

回答2:

Demo: http://jsfiddle.net/m1erickson/YyN2P/

A brief overview:

context.translate to where you want the rotation point of the text
context.rotate
context.fillText with an X offset == 1/2 the text width and Y offset == 1/2 the text height
(you can context.measureText to measure the text width)
wrap all this in context.save and context.restore.
use requestAnimationFrame to drive your animation.

And some example code:

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

来源：https://stackoverflow.com/questions/20866249/rotate-text-in-a-canvas-with-javascript

标签

javascript

html

canvas

rotation