Question

我试图将文字放在背景颜色上。我认为问题在于＆＃34; fillStyle＆＃34;正在应用于文本和背景。我希望文字是黑色的。我在这里做错了什么？

以下是我的代码：

var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;

var ctx = canvas.getContext("2d");
ctx.fillText("hello", 0, 0);
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);

var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);

这是指向小提琴的链接：https://jsfiddle.net/jessecookedesign/9rsy9gjn/36/

Answer 1

订单错误 - 您正在文本上绘制矩形。
文字与矩形颜色相同
没有指定字体
位置（0,0）超出范围

试试这样：

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("hello",10,30);

Answer 2

有几个问题：

您需要首先填充背景，然后填写文字。
您的文字位于画布区域上方 - 尝试较低的位置。

此代码具有正确的顺序，以及不在画布范围之外的文本的位置。

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = "#000000";
ctx.fillText("hello", 10, 10);

根据更改的顺序，您当然需要为文本选择一种新颜色，在本例中为"#000000"。

或者，你可以save和restore你的画布状态：

var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);
ctx.restore();
ctx.fillText("hello", 10, 10);

Answer 3

与您定义要显示的列表的HTML不同，使用画布时，就像您正在绘画一样。因此，您执行的每个“绘图”操作（例如fillRect或fillText）都将放在任何现有内容的顶部上并覆盖它。

同样，由于您实际上是绘画而不是定义对象，因此您需要在绘图之前设置填充样式。使用这个类比，你需要选择你将使用之前使用绘画的颜色。

最后，fillText方法将位置作为文本基线的开头。由于(0, 0)是画布的左上角，因此您的文本将被绘制在画布边界之上并且不可见，因此您需要将其向下移动，例如fillText("Hello World", 10, 100);

纠正这些问题，得到类似以下内容（并跳过转换为img标记所涉及的步骤）：

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a black background context.fillStyle = "black"; context.fillRect(0, 0, 200, 200); // Draw the text context.fillStyle = "#E7E0CA"; context.fillText("Hello world", 10, 100);

<canvas id="canvas" width="200" height="200"></canvas>

Answer 4

每当您访问html页面的画布时，无论你先画什么，都会先显示。因此，如果要显示彩色框，请先填充它，然后通过提供文本的颜色，字体和位置来编写文本。例如，

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.fillStyle = "#E7E0CA";//your rect color
ctx.fillRect(0, 0, 200, 200);//your rect size
ctx.fillStyle = "#000000";//color for your text
ctx.font="30px Arial";//font style and size
ctx.fillText("hello world",25,50);//text and location
</script>

背景文字（Canvas / JS）

4 个答案: