如何從Canvas中的filltext（）中刪除文本多邊形？

以下內容將畫布圖像繪製到頂部和底部。問題在於stroketext()會使文字出現怪異的多邊形形狀。需要使用filltext()和stroketext()，以便文本可以帶有黑色邊框的白色，無論背景顏色如何，這些邊框都可以在任何圖像上看到。有沒有辦法去除多邊形？如何從Canvas中的filltext（）中刪除文本多邊形？

drawText = function(context, pos, text) { 
    var fontSize = 100; 
    while(1) { 
     context.font = "bold " + fontSize + "px Arial"; 
     if((context.measureText(text).width < (width-15)) && (fontSize < height/10)) { 
      break; 
     } 
     fontSize-=2; 
    } 

    var y; 
    if(pos == "top") 
     y = fontSize + 15; 
    else if(pos == "bottom") { 
     y = height - 15; 
    } 

    context.strokeText(text, width/2, y); 
    context.fillText(text, width/2, y); 
} 

updateList = function(doc, where) { 
    if(where == "top") 
     $("#list").prepend(makeCanvas(doc)); 
    else { 
     $("#list").append(makeCanvas(doc)); 
    } 
    var canvas = document.getElementById(doc._id); 
    var context = canvas.getContext("2d"); 
    context.textAlign = "center"; 
    context.fillStyle = "#fff"; 
    context.strokeStyle = "#000"; 
    context.lineWidth = 6; 

    var img = new Image(); 
    img.src = getTemplateLink(doc.name); 
    img.onload = function() { 
     context.drawImage(img, 0, 0, canvas.width, canvas.height); 
     drawText(context, "top", doc.text.line1); 
     drawText(context, "bottom", doc.text.line2); 
    }; 
}

來源

2011-12-31 Simpleton

僅調用fillText()不顯示「怪異多邊形」，而是加入了呼籲strokeText()呢？ text字符串中的字符是否全部出現在「Arial _px Bold」字體中 - 即是否嵌入了換行符或製表符或Arial通常會顯示一個框的其他字符？很明顯，我沒有嘗試過你的代碼，但是這些都是我想到的問題，或許有點幫助。

來源

2012-01-02 15:57:46

只有使用stroketext（）才能修正奇怪的形狀。沒有額外的字符嵌入。 – Simpleton 2012-01-02 16:23:53

如何從Canvas中的filltext（）中刪除文本多邊形？

回答

相關問題