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()并不会显示奇怪的多边形形状＆＃34;但是添加对strokeText()的调用呢？ text字符串中的字符是否都出现在＆＃34; Arial _px Bold＆＃34;字体 - 即，是否有嵌入的换行符或制表符或其他字符，Arial通常会显示一个框？显然我还没有尝试过你的代码，但这些问题我想出的可能有点帮助。

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

1 个答案: