画布对象始终绘制在其他对象后面

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