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

小提琴是here。

如您所见，标签位于线条后面。无论我绘制的是什么顺序，首先是行还是首先是标签，它们总是出现在后面。为什么会这样？

Answer 1

这是因为您再次呼叫<form action="#" method="post"> <select name="carlist"> <option value="renault">Renault</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <input name="submit" type="button" value="Show the car!" onclick="location.href='images/<?php echo($_POST['carlist']); ?>.jpg'" /> </form>。 stroke将绘制您在第一个stroke循环中生成的当前路径。要了解我的意思，请将for移到context.stroke()循环之外。你会得到你想要的线条。

for

同样，您不需要在for (var y = 0; y < 5; y++) { context.moveTo(0, (y * ySegment)); context.lineTo(200, (y * ySegment)); // context.stroke(); } context.stroke();之后致电stroke()。完全从你的第二个循环中删除它。

fillText

注意：如果您打算多次调用此方法，最好使用beginPath启动新路径并避免重新绘制任何旧路径。

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

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

1 个答案: