javascript - Canvas 对象总是绘制在其他对象后面

Question

我使用 HTML Canvas 来绘制图表。我有水平线和每条线的标签。但标签总是出现在线条后面，即使它们是第二个绘制的。代码是:

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

fiddle 是here 。

如您所见，标签位于线条后面。无论我绘制什么顺序，先画线还是先画标签，它们总是出现在后面。为什么会发生这种情况？

Answer 1

这是因为您再次调用中风。 lines 将绘制您在第一个 for 循环中生成的当前路径。要明白我的意思，请将 context.lines() 移到 for 循环之外。您将得到您想要的线条。

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

同样，您不需要在 fillText 之后调用 lines()。从第二个循环中完全删除它。

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