HTML画布：在绘图下绘制网格 [英] HTML Canvas: Drawing grid below a plot

问题描述

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

I'm plotting a graph on a canvas and having trouble to draw the grid of the plot underneath the graph. My data points are drawn as rectangles (fillRect). When I first draw the graph and then draw the grid it works as expected, but since the grid is on the graph it doesnt look good. But when I draw the grid first and then plot the graph, all the grids disappear underneath.

我绘制我的地块如下：

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）
{

Then draw the grids as: 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();
    }
}

有人可以建议我如何绘制网格剧情。

Could someone suggest me how I can draw the grid underneath the plot. Or how to draw the graph such that it doesn't draw on the whole canvas thus disappearing the grid drawn earlier.

谢谢你。

推荐答案

使用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画布：在绘图下绘制网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！