Javascript 使用html5画布操作文本

你好，我想画切尔西足球俱乐部的标志，我已经有了“大事记” 比如圆形和内部空白等。。还有课文，但我有一个问题。。在徽标中，文本类似于一个半圆形状，但我找不到在画布中这样绘制的方法。右文本的示例请参见下面的图像，也请参见我的代码

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

});

---

我修改了@Esailija发布的教程代码，使其更加准确/灵活：

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

函数drawTextAlongArc（上下文、str、hei、centerX、centerY、半径、角度、上方）{
var met，wid；
context.save（）；
上下文。翻译（centerX、centerY）；
如果（！以上）{
半径=-半径；
角度=-角度；
}
否则{
hei=0；
}
旋转（-1*角度/2）；
旋转（-1*（角度/str.length）/2）；
对于（变量n=0；n

---

你可以在这里看到这样一个例子：

我已经修改了@Esailija发布的教程代码，使其更加准确/灵活：

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

函数drawTextAlongArc（上下文、str、hei、centerX、centerY、半径、角度、上方）{
var met，wid；
context.save（）；
上下文。翻译（centerX、centerY）；
如果（！以上）{
半径=-半径；
角度=-角度；
}
否则{
hei=0；
}
旋转（-1*角度/2）；
旋转（-1*（角度/str.length）/2）；
对于（变量n=0；n

---

你可以在这里看到这样一个例子：

嗯，是的，稍微好一点。。你知道如何让狮子在中间和红色的花/球吗？有没有可能用画布创建它，或者我必须使用图像来创建它？有可能，但可能不值得这么做。狮子需要绘制点，然后一个接一个地绘制点/填充点。可能有一个简单的算法来复制球/花的形状。但实际上，你打算用画布绘制工具来复制它吗？为什么不直接载入一张图片呢？啊，这是为了学校，我必须为我最喜欢的汽车/足球俱乐部或其他什么东西制作一个徽标。嗯，是的，稍微好一点。。你知道如何让狮子在中间和红色的花/球吗？有没有可能用画布创建它，或者我必须使用图像来创建它？有可能，但可能不值得这么做。狮子需要绘制点，然后一个接一个地绘制点/填充点。可能有一个简单的算法来复制球/花的形状。但实际上，你打算用画布绘制工具来复制它吗？为什么不直接载入一张图片呢？啊，这是为了学校，我必须创建一个我最喜欢的汽车/足球俱乐部或其他东西的标志