Javascript 如何使文本按逆时针方向书写
如何使文本逆时针书写Javascript 如何使文本按逆时针方向书写,javascript,jquery,canvas,html5-canvas,Javascript,Jquery,Canvas,Html5 Canvas,如何使文本逆时针书写 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 =
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();
};
函数drawTextAlongArc(上下文、str、centerX、centerY、半径、角度){
context.save();
上下文。翻译(centerX、centerY);
旋转(-1*角度/2);
旋转(-1*(角度/str.length)/2);
对于(变量n=0;n
我希望文本以逆时针方向显示,不确定你在问什么,但如果你想逆时针方向写文本,你只需更改这一行:
drawTextAlongArc(context, "Text along arc path", centerX, centerY, radius, -angle);
最后一个参数更改为-angle
但是,正如您所料,文本将是向后的。是的,我希望文本是向后的