在矩形顶部绘制文本

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();

任何想法我做错了什么？

Answer 1

HTML5 Canvas 上的每个绘制操作都会绘制并（通常）消除下面的任何内容。如果您想在矩形顶部绘制文本，您必须在调用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));
}