如何从Canvas中的filltext（）中删除文本多边形？

Question

以下内容将画布图像绘制到顶部和底部。问题在于stroketext()会使文字出现怪异的多边形形状。需要使用filltext()和stroketext()，以便文本可以带有黑色边框的白色，无论背景颜色如何，这些边框都可以在任何图像上看到。有没有办法去除多边形？

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

Answer 1

仅调用fillText()不显示“怪异多边形”，而是加入了呼吁strokeText()呢？ text字符串中的字符是否全部出现在“Arial _px Bold”字体中 - 即是否嵌入了换行符或制表符或Arial通常会显示一个框的其他字符？很明显，我没有尝试过你的代码，但是这些都是我想到的问题，或许有点帮助。