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 に答える