在矩形上方绘制文本

Question

我正在尝试在矩形的角落绘制一些文本，但我刚开始先在矩形上绘制文本，然后再处理定位。我似乎无法绘制一个矩形，填充它的颜色，然后在其上绘制文本。即使我先绘���文本，然后是矩形，最后填充这些顺序，矩形似乎仍然会覆盖文本。

这段代码将显示没有填充的文本和矩形

context.beginPath();
    
for (var i = 0; i < 8; i++) {
    context.font = "18pt Arial";
    context.fillText("blah", 0, 0 + (i * 50));
    context.rect(30, 0 + (i * 50), 50, 50);
}
    
context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

这段代码将显示文本和填充的矩形，但是文本似乎出现在矩形下方。

context.beginPath();
    
for (var i = 0; i < 8; i++) {
   context.font = "18pt Arial";
   context.fillText("blah", 0, 0 + (i * 50));
   context.rect(30, 0 + (i * 50), 50, 50);
}
    
context.fillStyle = "#33cc00";
context.fill();
context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

有什么想法我做错了吗？

- fes

Answer 1

HTML5画布上的每个绘图操作都会绘制在顶部并（通常）覆盖其下方的任何内容。如果您希望文本绘制在矩形上方，则必须在创建矩形后调用fill()方法，然后再调用fillText()。

无论绘图命令以何种顺序添加到路径中，都是在执行fill()方法时决定何时应用干燥墨水。由于您在所有fillText()调用之后执行此操作，因此矩形绘制在顶部。

我会像这样修改您的代码：

context.font = "18pt Arial";
context.strokeStyle = "#000";
context.lineWidth = 0.1;
for (var i=0; i<8; i++) {
   context.fillStyle = "#3c0";
   context.fillRect(30, 0 + (i * 50), 50, 50);
   context.strokeRect(30, 0 + (i * 50), 50, 50);
   context.fillStyle = "#fff";
   context.fillText("blah", 0, 0 + (i * 50));
}

或者，如果你不想使用 fillRect()/strokeRect()：

context.font = "18pt Arial";
context.strokeStyle = "#000";
context.lineWidth = 0.1;
for (var i=0; i<8; i++) {
   context.beginPath();
   context.fillStyle = "#3c0";
   context.rect(30, 0 + (i * 50), 50, 50);
   context.fill();
   context.stroke();

   context.fillStyle = "#fff";
   context.fillText("blah", 0, 0 + (i * 50));
}

- Phrogz

---

完美，正是我所需要的。我有点困惑于“分层”，因为它没有按正确的顺序填充。谢谢。 - fes