Question

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

Answer 1

我认为在单个画布中以数学方式创建独立的上下文并不困难。例如，假设您有一个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作为右侧框。

Answer 2

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

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

将画布划分为独立空间

2 个答案: