Javascript没有正确地在画布上绘制文本

Question

在这里，我试图通过这个函数“启动”传递一个参数，参数是tntLoader。然而，它成功传递并且函数执行包括计时器（间隔）运行完全正常，问题是它没有在画布上显示整个文本。它只显示一条细线。是的，canvas对象被正确加载，所有内容都在html文件中定义得很好。所以它应该是这样的：launch(tntLoader);。

var surface;
var timer;
var counter = 0;

var tntLoader= {
canvas:"canvas",
speed:30,
x:0,
y:0,
textSize:16,
canvasElement:0, /* Do not modify this variable */
surface:0, /* Do not modify this variable */
font:"Arial",
color:"#00000",
text:"Sample Text",
type:"fill"
};

function launch(feg){
    counter=0;
    feg.canvasElement = document.querySelector(feg.canvas);
    feg.surface = feg.canvasElement.getContext("2d");
    timer = window.setInterval(function(){drawText(feg);},feg.speed);
}

function drawText(drawingObject){
    if(counter>drawingObject.text.length){
        window.clearInterval(timer);
    }
    drawingObject.surface.font=drawingObject.textSize+"px "+drawingObject.font;
    if(drawingObject.type=="fill"){
        drawingObject.surface.fillText(drawingObject.text.charAt(counter),drawingObject.x+30*counter,drawingObject.y);
        counter++;
    }else{
        drawingObject.surface.strokeText(drawingObject.text.charAt(counter),drawingObject.x+30*counter,drawingObject.y);
        counter++;
    }
}

Answer 1

您可以通过添加到y位置来补偿基线，或者将基线设置为例如top：

drawingObject.surface.textBaseline = 'top';

始终从y位置表示的基线绘制文本。这是常见的方式。

以下概述了不同的基线设置对文本的作用：

^{Image source}

另一种方法是将提升部分添加到您的y位置。虽然在规范中它目前没有在任何浏览器中实现，因此无法以稳定的方式获得此值。

您必须使用例如font-height来估算它。这可能导致位置变化，具体取决于浏览器的文本引擎，因此如果您需要准确放置文本，那么第一种方法更好（暂时）。

fillText(text, x, y + textSize*0.8); // 80% is approx. ascent height