Question

请参阅我的jsfiddle关于此问题

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

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

小提琴

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不起作用。

Answer 1

首先，确保您的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 );

Answer 2

我无法相信。我最终玩了coords并意识到fillText是白色的。我在90％的代码中使用黑色。时间不见了。啊编程的乐趣啊。谢谢大家的帮助。

画布fillText无法渲染

2 个答案: