javascript - 将 Canvas 划分为独立的空间

Question

有没有办法将 Canvas 标签分成几个独立的空间，这样你就可以获得独立的 2d 上下文和每个独立的坐标。例如，如果我想要两次绘制相同的绘图，我可以将画布分成相等的部分，并在每个部分中使用相同的函数。

Answer 1

我使用了 peachykeen 的建议，创建了两个屏幕外画布，然后将它们作为图像放置在原始画布中，代码如下所示：

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

Answer 2

我认为在单个画布中以数学方式创建独立的上下文并不难。例如，假设您有一个 1000 x 500 的画布，您想将其分成两个并排的 500 x 500 区域。让您的所有函数调用都采用“区域”参数，然后根据您正在使用的区域使用简单的计算来调整 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作为右侧框。