在矩形上绘制文本

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上的每个绘制操作都会绘制在顶部，并且（通常）会消除下面的任何操作。如果要在矩形顶部绘制文本，必须在之后调用fillText()，您可以调用fill()来创建您创建的矩形。

将什么顺序的绘图命令添加到路径中都是无关紧要的，这是发生的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)); 
}