javascript - Canvas fillText无法渲染

请参阅我的jsfiddle关于此问题

https://jsfiddle.net/gL4m2z6v/

这是画布中的分数计算器，应该显示两个分数之间的最大公因数。您将需要在小提琴中扩展视口，然后重新运行以正确查看。

相关代码节选-参见小提琴

labelGCF: function(a, b){
    var b = a % b;
    if (b != 0) {
        console.log(a, window.innerWidth*0.8, winH50, textObj.fontSize);
        ctx.fillText(a, window.innerWidth*0.8, winH50, textObj.fontSize);
    } else {
        tableObj.labelGCF(b, a % b);
    }
}

// Exec
(function loop(){
    window.requestAnimationFrame(loop);
    // Draw Canvas Background
    c.width = canWidth;
    c.height = canHeight;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0,0,canWidth,canHeight);
    // Draw Arrows
    arrowObj.draw(arrowObj[0]);
    arrowObj.draw(arrowObj[1]);
    arrowObj.draw(arrowObj[2]);
    arrowObj.draw(arrowObj[3]);
    coordsObj.arrows =
    [arrowObj.getCoords(arrowObj[0]), arrowObj.getCoords(arrowObj[1]), arrowObj.getCoords(arrowObj[2]), arrowObj.getCoords(arrowObj[3])];
    // console.log("coordsObj.arrows: "+coordsObj.arrows);
    // Draw Table
    tableObj.draw();
    tableObj.labelXAxis();
    tableObj.labelYAxis();
    tableObj.labelTable();
    tableObj.drawGrid();
    tableObj.labelGCF(tableObj.xCount, tableObj.yCount);

})();

该代码似乎已执行，并且变量已正确调出。我不知道为什么fillText不起作用。

最佳答案

首先，确保您的fillText坐标在画布内。 1536的x可能在画布的右边。同上，y为489.5。

其次，fillText的最后一个参数是画布用于显示文本的最大宽度。任何不适合该宽度的文本都将被截断。您指定的textObj.fontSize（== 48）似乎与最大宽度无关。因此，您可能需要忽略该论点。

并且...如果需要，可以使用textAlign和textBaseline在指定的x，y上水平和垂直居中显示文本：

// center text horizontally at [x,y]
ctx.textAlign='center';

// center text vertically at [x,y]
ctx.textBaseline='middle';

// draw your text (it will be centered at the specified x,y)
ctx.fillText('Centered Text', x,y );