Question

我不是在寻找一个直接的答案，但我会喜欢我的问题的一些指导。目前我正在尝试显示文本＆＃34; HTML5 Canavs＆＃34;在。虽然我的代码看起来与许多不同的网站和我的工作书相比都是正确的，但我看到的是没有任何文字的画布边框。我使用过Firefox和Chrome，但都无法在画布中显示文字。如果我错过了一些愚蠢的话，请告诉我......我非常感谢任何指导！

<!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>

Answer 1

您的代码中有一些错误：

context.fillText = ("HTML5 Canvas", 0, 0);需要改为context.fillText("HTML5 Canvas", 0, 0);，因为它是一种功能。
由于您已设置context.textAlign = "center";，并且由于文字在您指定的坐标上方绘制，因此您的文字正在画布之外绘制。将您的fillText功能更改为绘制在画布上的某个位置。

固定（实时）示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在<canvas>中显示我的文本

1 个答案: