3

Canvasタグをいくつかの独立したスペースに分割して、それぞれに独立した2Dコンテキストと独立した座標を取得できるようにする方法はありますか？たとえば、同じ図面を2回作成したい場合は、キャンバスを均等に分割し、各部分で同じ機能を使用できます。

4

2 に答える 2

1

私は peachykeen が提案したものを使用し、2 つのオフスクリーン キャンバスを作成し、それらを元のキャンバスに画像として配置しました。コードは次のようになります。

canvas1 = document.createElement("canvas");
canvas2 = document.createElement("canvas");

//Draw on the canvases

Drawing code

//Add them to the original canvas

if (OriginalCanvas && OriginalCanvas.getContext) {
    var context = OriginalCanvas.getContext('2d');
    if (context) {
        context.drawImage(canvas1, 0, 0, OriginalCanvas.width / 2, OriginalCanvas.height);
        context.drawImage(canvas2, OriginalCanvas.width / 2, 0, OriginalCanvas.width / 2, OriginalCanvas.height);
    }
}
于 2012-08-20T18:49:05.780 に答える
0

単一のキャンバス内に独立したコンテキストを数学的に作成することは難しくないと思います。たとえば、2つの並んだ500x500の領域に分割したい1000x500のキャンバスがあるとします。すべての関数呼び出しで「area」パラメーターを取得し、簡単な計算を使用して、作業している領域に応じてx座標を調整します。このようなもの：

function drawLine(fromX, fromY, toX, toY, area) {
    var startX = fromX + (area * 500);
    var startY = fromY;
    var endX = fromX + (area * 500);
    var endY = fromY;
    // draw your line here
}

この場合、左側の領域で作業するときは、右側のボックスにarea = 0とを使用します。area = 1

于 2012-08-20T18:16:02.297 に答える