如何使文本按逆时针方向写入 [英] How to make the text write in counterclockwise direction

问题描述

如何让文字逆时针书写？

  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，文本沿弧路径，centerX，centerY，radius，angle）; 
 
 //在文本下绘制圆形
 context.arc（centerX，centerY，radius  -  10，0，2 * Math.PI，false）; 
 context.stroke（）; 
}; 
  

我想让文本显示为

解决方案

不知道你是什么意思，但如果你想以逆时针方向向后写你的文本，你只需要改变这一行：

  drawTextAlongArc（context，文本沿弧路径，centerX，centerY，radius，-angle）; 
  

最后一个参数更改为 -angle p>

文本将向后，正如你所期望的那样。

How do I make text write counter-clockwise?

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

I want to text to appear like this in counter clockwise

解决方案

Not sure what you're asking, but if you want to write your text backwards in a counter-clockwise direction you'd just change this line:

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

last argument changed to -angle

the text is going to be backwards though, as you would expect.

这篇关于如何使文本按逆时针方向写入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！