我并不是在寻找直接的答案，但我希望对我的问题有一些指导。目前我正在尝试在 中显示文本“HTML5 Canavs”。尽管与许多不同的网站和我的工作簿相比，我的代码看起来是正确的，但我看到的只是 Canvas 的边框，没有任何文本。我使用过 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";，并且由于文本绘制在您指定的坐标上方，因此您的文本将绘制在 Canvas 之外。更改您的fillText函数以在 Canvas 上的某个位置进行绘制。
固定(实时)示例:
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>关于javascript - 如何让我的文本显示在 <canvas> 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32039437/