您已经渲染了画布,但不清楚您想要如何组合它们 - 重叠、并排?在任何一种情况下你都可以使用Canvas.context.drawImage()
将它们添加到新的画布对象中,然后使用Canvas.toDataURL()
方法返回新画布的 dataURL。
也许是这样的事情...
/* assumes each canvas has the same dimensions */
var overlayCanvases = function(cnv1, cnv2, cnv3) {
var newCanvas = document.createElement('canvas'),
ctx = newCanvas.getContext('2d'),
width = cnv1.width,
height = cnv1.height;
newCanvas.width = width;
newCanvas.height = height;
[cnv1, cnv2, cnv3].forEach(function(n) {
ctx.beginPath();
ctx.drawImage(n, 0, 0, width, height);
});
return newCanvas.toDataURL();
};
/* assumes each canvas has the same width */
var verticalCanvases = function(cnv1, cnv2, cnv3) {
var newCanvas = document.createElement('canvas'),
ctx = newCanvas.getContext('2d'),
width = cnv1.width,
height = cnv1.height + cnv2.height + cnv3.height;
newCanvas.width = width;
newCanvas.height = height;
[{
cnv: cnv1,
y: 0
},
{
cnv: cnv2,
y: cnv1.height
},
{
cnv: cnv3,
y: cnv1.height + cnv2.height
}].forEach(function(n) {
ctx.beginPath();
ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
});
return newCanvas.toDataURL();
};
/* USAGE */
var dURL1 = overlayCanvases(canvas1,canvas2,canvas3);
var dURL2 = verticalCanvases(canvas1,canvas2,canvas3);
The overlayCanvases()
函数会将画布放置在彼此的顶部,因此参数的顺序很重要。这verticalCanvases()
将垂直排列画布并按降序排列。这里需要注意的重要一点是Canvas.context.drawImage()
允许您将一张画布绘制到另一张画布上 - 可以调整相对位置以满足您的目的。
上面的函数 Fiddled :https://jsfiddle.net/BnPck/cyLrmpjy/ https://jsfiddle.net/BnPck/cyLrmpjy/