1

キャンバス上の円弧に沿ってテキストを湾曲させるコードに取り組んでいます。上部は必要なだけ近くで機能していますが、下部に上向きに湾曲するテキストを追加する必要もあります。私はそれを解決することはできません。どんな助けでも大歓迎です。

また、ここに私が取り組んでいるフィドルへのリンクがあります：ここに

var
        text = 'Hello world, Im just JS',
        len = text.length,
        // The coverage of the circle
        angle = Math.PI * .7,
        centerX = 275,
        centerY = 250,
        radius = 200,
        context = document.getElementById('canvas').getContext('2d'),
        n = 0;

    // Format the text
    context.font = '40px Arial';
    context.textAlign = 'center';
    context.fillStyle = 'black';
    context.strokeStyle = 'blue';
    context.lineWidth = 2;

    // Save the current state
    context.save();

    // Move our pointer
    context.translate(centerX, centerY);

    // Rotate
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / len) / 2);

    // Loop over the string
    for(; n < len; n += 1) {
        context.rotate(angle / len);
        context.save();
        context.translate(0, -1 * radius);

        context.fillText(text[n], 0, 0);
        context.strokeText(text[n], 0, 0);

        context.restore();
    };

    // Restore the canvas state
    context.restore();
4

1 に答える 1

1

さて、私はなんとかこれを行うことができました。2つの非常に小さな変更でした。

これには、ループ内の変換を反転し、入力文字列を反転することが含まれていました。完全

これが動作するコードです。（2つの小さな変更に注意してください）そしてここにリンクがあります

var
        text = 'Hello world, Im just JS'.split('').reverse().join(''),
        len = text.length,
        // The coverage of the circle
        angle = Math.PI * .7,
        centerX = 275,
        centerY = 250,
        radius = 200,
        context = document.getElementById('canvas').getContext('2d'),
        n = 0;

    // Format the text
    context.font = '40px Arial';
    context.textAlign = 'center';
    context.fillStyle = 'black';
    context.strokeStyle = 'blue';
    context.lineWidth = 2;

    // Save the current state
    context.save();

    // Move our pointer
    context.translate(centerX, centerY);

    // Rotate
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / len) / 2);

    // Loop over the string
    for(; n < len; n += 1) {
        context.rotate(angle / len);
        context.save();
        context.translate(0, -(-1 * radius));

        context.fillText(text[n], 0, 0);
        context.strokeText(text[n], 0, 0);

        context.restore();
    };

    // Restore the canvas state
    context.restore();
于 2013-01-29T13:04:52.520 に答える