Question

我正在画布上绘制图形，并且无法在图形下方绘制图形的网格。我的数据点绘制为矩形（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],...);
        }
    }

然后将网格绘制为：函数DrawGrids（图） {

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

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

谢谢。

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

HTML Canvas：在绘图下方绘制网格

1 个答案: