用html5畫布操縱文字

Question

你好我想畫切爾西足球俱樂部的標誌，我已經有了'大東西' 就像圈子和內部空白的空間等..和文本，但有我得到了一個問題與..在徽標中的文字就像一個半圈的形狀，但我無法找到像這樣在畫布上繪製的方式，以便正確的文本示例請參閱下面的圖片並參見我的代碼

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

}); 

Answer 1

我已經修改了@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(); 

這裏你可以看到這樣一個例子：http://jsfiddle.net/6uQSS/1/