javascript - 在 Canvas 上渲染文本不起作用

Question

我有这样的东西(这里也是 jsfiddle ):

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


canvas.width = 400;
canvas.height = 300;

ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 400, 300);

ctx.fillStlye = "white";
ctx.font = "16px Arial, sans-serif";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("asdf", 20, 20);

现在该代码应该在矩形上绘制“asdf”，但事实并非如此。为什么？

Answer 1

因为你在代码中有一个错字，它阻止了 fillStyle 的改变(而且你基本上只是向 ctx 添加了一个新属性，所以也不会有任何错误):

ctx.fillStlye = "white";
          ^^

应该是:

ctx.fillStyle = "white";

Modified fiddle here