2012-09-07 18 views
4

如何使文本逆時針寫入?如何使文本逆時針寫入

function drawTextAlongArc(context, str, centerX, centerY, radius, angle){ 
    context.save(); 
    context.translate(centerX, centerY); 
    context.rotate(-1 * angle/2); 
    context.rotate(-1 * (angle/str.length)/2); 
    for (var n = 0; n < str.length; n++) { 
     context.rotate(angle/str.length); 
     context.save(); 
     context.translate(0, -1 * radius); 
     var char = str[n]; 
     context.fillText(char, 0, 0); 
     context.restore(); 
    } 
    context.restore(); 
} 

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 

    context.font = "30pt Calibri"; 
    context.textAlign = "center"; 
    context.fillStyle = "blue"; 
    context.strokeStyle = "blue"; 
    context.lineWidth = 4; 

    var centerX = canvas.width/2; 
    var centerY = canvas.height - 30; 
    var angle = Math.PI * 0.8; // radians 
    var radius = 150; 
    drawTextAlongArc(context, "Text along arc path", centerX, centerY, radius, angle); 

    // draw circle underneath text 
    context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false); 
    context.stroke(); 
}; 

我想要的文字出現這樣enter image description here在逆時針

回答

4

不知道你問什麼,但如果你想向後寫你的文字在逆時針方向您原本就改變這一行:

drawTextAlongArc(context, "Text along arc path", centerX, centerY, radius, -angle); 

最後一個參數更改爲-angle

文本將是向後不過,因爲喲你會期待的。

+0

是我希望文本是向後的 – Anish