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

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";

在这里修改小提琴