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 elem
Solution 1:
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();
functionanimate(){
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();
}
Solution 2:
Have made some changes in your code, it should help:
<html>
<canvasid="myCanvas"width="300"height="300"style="border:1px solid
#d3d3d3;"></canvas><script>var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = newArray("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>
Post a Comment for "Rotate Text In A Canvas With Javascript"