Javascript 画布填充文本不呈现

关于这个问题，请参阅我的JSFIDLE

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

相关代码摘录-完整信息请参见fiddle

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

Second，

fillText

的最后一个参数是画布用于显示文本的最大宽度。任何不适合该宽度的文本都将被截断。您指定的

textObj.fontSize

（==48）似乎与最大宽度无关。所以你可能想省去这个论点

和。。。如果需要，您可以使用

textAlign

和

textbeline

将文本水平和垂直居中于指定的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 );

---

真不敢相信。我最终玩起了coords，意识到fillText是白色的。我几乎90%的代码都用黑色。几个小时过去了。啊，编程的乐趣。谢谢大家的帮助。

ctx.fillText之前的console.log的输出是什么？请查看并更正您的参数。“0”将在位置（1536489.5）上绘制是的，但它不会为我显示。你有没有试过小提琴或dl的代码，并在全屏使用。即使坐标在视口内，它也不会在屏幕上绘制0。嗨，马克，我运行1920x1080，所以文本应该显示在视口内。我对你的回答中的最大宽度感到好奇。。。我以为这是48px字体大小的像素，也就是48px宽。我对其他呈现的文本使用相同的代码，所以我仍然感到困惑。@MichaelPaccione。好吧，这绝对是限制显示宽度为48像素的论点。如果你总是有一个字符，那么一切都是好的，但更宽的文本将被切断。是的，原来填充文本被设置为白色，当我认为它是黑色的，我无法看到白色背景下的文本。lol:/