如何將頁面中的兩個或更多畫布元素合並為一個畫布元素，其中新畫布元素的寬度是所有元素的總和？

Question

我有兩個單獨的畫布元素。 一個帶有文字“ WELCOME”，第二個帶有文字“ YOU”。 現在我想將這兩個canvas元素合並到新的canvas元素中，看起來應該像“ WELCOMEYOU”

我的片段是

function buttonclickevent() {
    //To get all the canvas elements
    var canvas1 = $('canvas');
    var b_canvas = new Array();
    for (var l = 0; canvas1[l] != null; l++) {
        b_canvas[l] = canvas1[l];
    }
    //To get only selected canvas elements instead of all canvas element.
    //b_canvas[0] = canvas1[0];
    //b_canvas[1] = canvas1[1];

    //create a temporary canvas to store the combined canvas element.
    var buffer = document.createElement("canvas");
    buffer.width = 0;
    buffer.height = 0;
    for (var i = 0; i < b_canvas.length; i++) {
        buffer.width += b_canvas[i].width;
        buffer.height += b_canvas[i].height;
    }
    var yPosition = 0;
    var buffer_context = buffer.getContext("2d");
    for (var j = 0; j < b_canvas.length; j++) {
        buffer_context.drawImage(b_canvas[j], 0, yPosition, b_canvas[j].width, b_canvas[j].height);
        yPosition += b_canvas[j].height;
    }
    exportImage(buffer, "myImage", "png");
}

function exportImage(buffer, fileName, fileType) {
    var lnk = document.createElement('a'),
        e;
    lnk.download = fileName;
    lnk.href = buffer.toDataURL("image/" + fileType).replace("image/" + fileType, "image/octet-stream");
    if (document.createEvent) {
        e = document.createEvent("MouseEvents");
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        lnk.dispatchEvent(e);
    } else if (lnk.fireEvent) {
        lnk.fireEvent("onclick");
    }
}

Answer 1

您可以使用drawImage將第一個畫布組合到第二個畫布上：

var x=0;
var y=0;

context2.drawImage( canvas1, x,y );

您可以通過調整x，y來調整canvas1在canvas2上繪制的位置。