如何将多个画布元素放入一个画布元素中？

Question

如何将多个画布元素放入一个画布元素中？

javascripthtmlcanvas

5

我有多个由JavaScript创建的画布元素。我的问题是：“如何将多个画布元素放置到一个画布元素中？”。

- Julian

你能设置一个 JSFiddle 吗？ - Chamika Sandamal

3个回答

2

canvas的drawImage方法实际上可以接受另一个canvas而不是一张图片 - 你不需要先把画布转换成图片。(详见WhatWG文档)

我简化了Allendar的JSFiddle来演示:

http://jsfiddle.net/7hEKL/

基本上，你只需要做以下几步:

targetCanvas.drawImage(sourceCanvas, 0, 0);

并且你应该可以顺利进行。

- Chris W.

0

也许可以尝试这样做，将源画布导出为图像，然后将该图像绘制到目标画布上（未经测试）：

function drawCanvasOnOtherCanvas(src, target) {
  var img = new Image();
  img.onload = function() {
    target.drawImage(img, 0, 0);
  };
  img.src = src.toDataURL('image/png');
}

- Jan Jongboom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1467267 · Accepted Answer

这是你需要的内容：

JSfiddle

它会抓取每个canvas并将它们变成PNG格式的图片
获取缓存canvas并将PNG图片写在它们内部
将缓存canvas写回PNG并将其发送到IMG标签中

只需给#buffer canvas元素添加display: none;，所有操作都将在不可见状态下进行（请在此处检查：http://jsfiddle.net/Allendar/UqxCY/2/）。

HTML

<body onload="generatePNG()">
    <canvas id="c1"></canvas>
    <canvas id="c2"></canvas>
    <canvas id="c3"></canvas>

    <canvas id="buffer"></canvas>

    <div id="output">Empty</div>
</body>

CSS

canvas[id^=c], div[id=output] {
    border: 1px solid red;
}

canvas[id=buffer] {
    border: 1px dotted green;
}

#output {
    padding: 15px;
}

#output img {
    border: 1px dotted blue;
}

JavaScript

function generatePNG() {
    var b_canvas1 = document.getElementById("c1");
    var b_context1 = b_canvas1.getContext("2d");
    b_context1.fillRect(10, 50, 50, 50);
    var b_canvas2 = document.getElementById("c2");
    var b_context2 = b_canvas2.getContext("2d");
    b_context2.fillRect(80, 50, 50, 50);
    var b_canvas3 = document.getElementById("c3");
    var b_context3 = b_canvas3.getContext("2d");
    b_context3.fillRect(150, 50, 50, 50);

    var img1 = new Image();
    img1.src = b_canvas1.toDataURL("image/png");
    var img2 = new Image();
    img2.src = b_canvas2.toDataURL("image/png");
    var img3 = new Image();
    img3.src = b_canvas3.toDataURL("image/png");

    var buffer = document.getElementById("buffer");
    var buffer_context = buffer.getContext("2d");
    buffer_context.drawImage(img1, 0, 0);
    buffer_context.drawImage(img2, 0, 0);
    buffer_context.drawImage(img3, 0, 0);

    var buffer_img = new Image();
    buffer_img.src = buffer.toDataURL("image/png");

    var output = document.getElementById('output');
    output.innerHTML = '<img src="' + buffer_img.src + '" alt="Canvas Image" />';
}