0

我正在画布上绘制图表，并且无法在图表下方绘制图表的网格。我的数据点被绘制为矩形（fillRect）。当我第一次绘制图表然后绘制网格时，它按预期工作，但由于网格在图表上，它看起来并不好。但是当我先绘制网格然后绘制图形时，所有网格都消失在下面。

我画我的情节如下：

var plots = document.getElementsByClassName("PlotCanvas");
for (var x=0; x < tokens.length; x++)
    {
        var canvas = plots[x];
        canvas.width = arrayOfArrays[x].length;
        var context = canvas.getContext("2d");

        for(var point=1; point<arrayOfArrays[x].length; point++)
        {
            context.fillRect(point, arrayOfArrays[x][point],...);
        }
    }

然后将网格绘制为： function DrawGrids(plots) {

    for(var count=0; count<plots.length; count++)
    {
        var ctx = plots[count].getContext("2d");
        ctx.beginPath();

        for (var x = 0.5; x < plots[count].width; x += 20) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, plots[count].height);
        }
        for (var y = 0.5; y < plots[count].height; y += 20) {
            ctx.moveTo(0, y);
            ctx.lineTo(plots[count].width, y);
        }
        ctx.strokeStyle = "#eee";
        ctx.stroke();
    }
}

有人可以建议我如何在情节下方绘制网格。或者如何绘制图形，使其不在整个画布上绘制，从而使之前绘制的网格消失。

谢谢你。

4

1 回答 1

1

使用 ctx.globalCompositeOperation="destination-over" 在地块后面绘制网格！

// draw your plots here

// save the context
ctx.save();

// set compositing to "destination-over"
// New drawings are drawn behind the existing canvas content.
ctx.globalCompositeOperation = "destination-over";

// draw your grids behind your plots!
DrawGrids();

// restore the context
ctx.restore();
于 2013-03-17T05:33:25.493 回答