畫布對象始終繪製在其他對象後面

Question

使用HTML畫布繪製圖形。每條線都有水平線條和標籤。但是標籤總是出現在線後面，即使它們是第二個。代碼是：

function paintGrid(canvas, context) { 

    var xSegment = 200/5, 
     ySegment = 200/5; 

    var color = '#EEE'; 

    // DRAW GRID 
    context.fillStyle = color; 
    context.strokeStyle = color; 
    context.lineWidth = 5; 

    for (var y = 0; y < 5; y++) { 
     context.moveTo(0, (y * ySegment)); 
     context.lineTo(200, (y * ySegment)); 
     context.stroke(); 
    } 


    // LABELS 
    context.font = "9pt Arial"; 
    context.fillStyle = '#000'; 

    var ySeg = canvas.height/5; 
    var xSeg = canvas.width/5; 
    var yLabel, xLabel, zeroLabel; 

    for (var y = 1; y < 5; y++) { 

     yLabel = (ySegment * y).toFixed(1); 

     context.fillText(yLabel, 5, (canvas.height - (ySeg * y))); 
     context.stroke(); 
    } 
} 

小提琴是here。

正如您所看到的，標籤在行後面。不管我畫的順序如何，線條第一或標籤第一，它們總是出現在後面。這是爲什麼發生？

Answer 1

這是因爲你再次打電話給stroke。 stroke將繪製您在第一個for循環中生成的當前路徑。要了解我的意思，請在for循環之外移動context.stroke()。你會得到你想要的線。

for (var y = 0; y < 5; y++) { 
    context.moveTo(0, (y * ySegment)); 
    context.lineTo(200, (y * ySegment)); 
    // context.stroke(); 
} 
context.stroke(); 

同樣，你不需要fillText後調用stroke()。從第二個循環中完全刪除它。

for (var y = 1; y < 5; y++) { 
    yLabel = (ySegment * y).toFixed(1); 
    context.fillText(yLabel, 5, (canvas.height - (ySeg * y))); 
} 

注意：如果你打算在這個多次調用，這將是明智的使用beginPath開始一個新的路徑，並避免重新繪製任何舊的路徑。

context.beginPath(); 
for (var y = 0; y < 5; y++) { 
    context.moveTo(0, (y * ySegment)); 
    context.lineTo(200, (y * ySegment)); 
    // context.stroke(); 
} 
context.stroke();