如何让我的文字显示在<canvas>

我不是在寻找一个直截了当的答案，但我希望能得到一些关于我的问题的指导。目前，我正试图显示文本"HTML5 Canavs"在。虽然与许多不同的网站和我的工作簿相比，我的代码看起来是正确的，但我所看到的只是画布的边框，没有任何文本。我用过Firefox和Chrome，但都无法在canvas中显示文本。请让我知道，如果我错过了什么愚蠢的…我非常感谢任何指导!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise 14.5</title>
</head>
<body>
<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas>
<script>
    var canvas = document.getElementById("text");
    var context = canvas.getContext("2d")
    context.fillStyle = "green";
    context.font = "bold 28px serif";
    context.textAlign = "center";
    context.fillText = ("HTML5 Canvas", 0, 0);
    context.shadowBlur = 6;
    context.shadowOffsetX = -2;
    context.shadowOffsetY = -5;
    context.shadowColor = "grey";
</script>
</body>
</html>

你的代码中有几个错误:

context.fillText = ("HTML5 Canvas", 0, 0);需要代替context.fillText("HTML5 Canvas", 0, 0);，因为它是一个函数。
既然你已经设置了context.textAlign = "center";，并且因为文本绘制在你指定的坐标之上，你的文本被绘制在画布之外。改变你的fillText函数来绘制画布上的某个地方。

固定(live)示例:

var canvas = document.getElementById("text");
var context = canvas.getContext("2d")
context.fillStyle = "green";
context.font = "30px Arial";
context.textAlign = "center";
context.fillText("HTML5 Canvas", 200, 50);
context.shadowBlur = 6;
context.shadowOffsetX = -2;
context.shadowOffsetY = -5;
context.shadowColor = "grey";

<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas>

相关内容

最新更新

热门标签：