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

ここに画像の説明を入力 このように反時計回りにテキストを表示したい

4

1 に答える 1

4

何を求めているのかわかりませんが、テキストを反時計回りに逆向きに書きたい場合は、次の行を変更するだけです。

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

最後の引数がに変更されました-angle

ただし、ご想像のとおり、テキストは逆になります。

于 2012-09-07T06:25:24.610 に答える