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

我有多个由JavaScript创建的画布元素。我的问题是：“我怎样才能把多个画布元素放到一个画布元素上？”。如何将多个画布元素放入一个画布元素中？

来源

2013-04-18 Julian

你可以设置一个jsfiddle –

在这里你去;

JSfiddle

它会抓住每一个画布，让他们PNG的
访问缓冲区帆布和写在彼此顶部的PNG的里面
回写缓存画布PNG和发送它到IMG标签

只要给#buffer画布元素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" />'; 
}

来源

2013-04-18 12:51:44

这个工程，但你使用的是jQuery。有没有可能做到这一点，而不使用jQuery？ – Julian

当然;该问题已更新，现在可以在原生JavaScript上完全工作。 – 2013-04-19 14:55:08

您不需要创建中间图像。 drawImage方法可以直接将另一个画布作为要绘制的图像。 –

也许这样的事情，源画布导出为图像，油漆图像到目标画布（未经测试）：

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

来源

2013-04-18 12:41:03

画布的方法的drawImage实际上可以拍摄另一张画布而不是图片 - 您无需首先将画布转换为图像。（见WhatWG's documentation。）

我已经简化Allendar的的jsfiddle证明：

http://jsfiddle.net/7hEKL/

基本上，所有你需要做的是：

targetCanvas.drawImage(sourceCanvas, 0, 0);

，你应该是好走。

来源

2013-04-19 15:52:19

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

回答

相关问题