0

こんにちは、チェルシー フットボール クラブのロゴを描きたいと思っています。円や内側の空白などの「大きなもの」とテキストは既にありますが、問題が発生した場所があります。ロゴのテキスト半分の円の形に似ていますが、右のテキストの例については、キャンバスでこのように描画する方法が見つかりません。下の画像を参照し、私のコードも参照してください

$(function () {

        //variables
        var canvas = document.getElementById("chelseaLogo");
        var CanvasContext = canvas.getContext("2d");
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 170;
        var radiusWhite = radius - 30;

        // outside logo
        CanvasContext.beginPath();
        CanvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        CanvasContext.fillStyle = '#0B49DB';
        CanvasContext.fill();

        //stroke
        CanvasContext.lineWidth = 2;
        CanvasContext.strokeStyle = '#FFF700';
        CanvasContext.stroke();

        //white innercircle
        CanvasContext.beginPath();
        CanvasContext.arc(centerX, centerY, radiusWhite, 0, 2 * Math.PI, false);
        CanvasContext.fillStyle = '#fff';
        CanvasContext.fill();

        //text top
        CanvasContext.font = '15pt Calibri';
        CanvasContext.fillText('Chelsea', 155, 25);

        //text bottom
        CanvasContext.font = '15pt Calibri';
        CanvasContext.fillText('Football Club', 140, 330);

});

チェルシー ロゴ

4

1 に答える 1

3

@Esailja が投稿したチュートリアル コードを、もう少し正確/柔軟になるように変更しました。

function drawTextAlongArc(context, str, hei, centerX, centerY, radius, angle, above) {
    var met, wid;
    context.save();
    context.translate(centerX, centerY);
    if (!above) {
        radius = -radius;
        angle = -angle;
    }
    else{
        hei = 0;
    }
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / str.length) / 2);

    for (var n = 0; n < str.length; n++) {
        var char = str[n];
        met = context.measureText(char);
        wid = met.width;
        console.log(met);

        context.rotate(angle / str.length);
        context.fillText(char, -wid / 2, -radius + hei);
        context.strokeText(char, -wid / 2, -radius + hei);
    }
    context.restore();
}
ctx.font = 'bold 40pt impact';
ctx.fillStyle = '#000';
ctx.strokeStyle = '#f00';
ctx.lineWidth = 2;
drawTextAlongArc(ctx, "CHELSEA", 40, 200, 200, 100, Math.PI*3/5, true);

ctx.font = 'bold 20pt impact';
drawTextAlongArc(ctx, "FOOTBALL CLUB", 30, 200, 200, 100, Math.PI*3/5, false);

ctx.beginPath();
ctx.arc(200,200,100,0,Math.PI*2,false);
ctx.stroke();

ここでこの例を見ることができます: http://jsfiddle.net/6uQSS/1/

于 2012-10-25T17:18:19.473 に答える