通过JavaScript函数将文本写入画布

Question

我了解如何在函数外部的JavaScript中将文本放入画布上，但是将代码放入函数中似乎会破坏一切

例：

var c = document.getElementById("APICanvas");
var canvas = c.getContext("2d");
canvas.font('20px Times New Roman);
canvas.fillText("Hello, world!", 20, 20);

结果是"Hello, world!" 在canvas上的(20,20) ，但

function text(text,x,y) {
    var c = document.getElementById("APICanvas");
            var canvas = c.getContext("2d");
            canvas.font('20px Times New Roman);
            canvas.fillText(text,x,y);
    }

text("Hello, world!",20,20);

这导致canvas上没有任何显示。

我不知道为什么在函数内部使用此方法不起作用，并且感到非常困惑。

Answer 1

font是属性而不是功能。 您必须使用赋值运算符设置属性。 您还错过了属性字符串值结尾处的结束符' 。

更改

canvas.font('20px Times New Roman);

至

canvas.font = '20px Times New Roman';

 function text(text,x,y) { var c = document.getElementById("APICanvas"); var canvas = c.getContext("2d"); canvas.font = '20px Times New Roman'; canvas.fillText(text,x,y); } text("Hello, world!",20,20); 

 <canvas id="APICanvas"></div>