在矩形上繪製文本

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