javascript - 显式分配时 Canvas 字体被忽略

Question

我正在 Canvas 上绘制文本。问题是 ctx.font = 字体被完全忽略并将默认值设置为 10px sans-serif。 这是我的功能。

function drawResTexts(num) {
                    var num = num || "";
                    var font = (resTxtStyle["font-style"+num] != 
undefined ? resTxtStyle["font-style"+num] : "normal") + " " + resTxtStyle["font-size"+num] + "px " + resTxtStyle["font"+num];

                    ctx.font = font; // This line has no effect whatsoever

                    ctx.textAlign = resTxtStyle["align"+num] || "left";
                    var txtArr = resTxt.split("\n");

                    for (var i = 0; i < txtArr.length; i++) {
                        if (resTxtStyle["stroke"+num] != undefined) {
                            var stroke = resTxtStyle["stroke"+num].split(" ");
                            ctx.strokeStyle = stroke[1];
                            ctx.lineWidth = Number(stroke[0]) * 2;
                            ctx.strokeText(txtArr[i], resTxtStyle["pos"+num][0], resTxtStyle["pos"+num][1]);
                        }
                        ctx.fillStyle = resTxtStyle["color"+num];
                        ctx.fillText(txtArr[i], resTxtStyle["pos"+num][0], resTxtStyle["pos"+num][1] + i * (resTxtStyle["line-height"+num] || 0));
                    }
                }

然后我使用drawText()调用这个函数；

字体变量为“常规 45px Georgia”

这是我的 resTxtStyle obj

resTxtStyle = {
           "align": "center",
            "font": "Georgia",
            "font-size": "45",
            "font-style": "regular",
            "color": "#FFFF4C",
            "stroke": "2 #000"
}

有人可以帮忙吗？

我在这里看到了类似的问题，但在这里 - http://www.tenpay.tech/questions/2162612/html-5-canvas-font-being-ignored但是这里再次调用canvas.getContext来重置字体，但我的没有这种情况。

如果有帮助，我们将不胜感激。

Answer 1

事实证明，字体应该是“正常的 45px Georgia”。这很奇怪，因为每个图形软件都使用“常规”字体样式。 也许有人会在这方面获得帮助。