Come posso inserire più elementi canvas in un elemento canvas?

Ho più elementi canvas creati da JavaScript. La mia domanda è: "Come posso inserire più elementi canvas su un elemento canvas?".Come posso inserire più elementi canvas in un elemento canvas?

fonte

2013-04-18 Julian

è possibile impostare un jsfiddle –

Qui si va;

JSfiddle

Sarà afferrare ogni tela e li PNG
accesso alla tela buffer di fare e scrivere i PNG di uno sopra l'altro al suo interno
Scrivere di nuovo la tela del buffer in PNG e inviare alla IMG-tag

solo dare l'elemento canvas #bufferdisplay: none; e tutto avverrà invisibile (controllare qui; 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" />'; 
}

fonte

2013-04-18 12:51:44

Questo funziona, ma si sta utilizzando jQuery. C'è una possibilità di farlo senza l'uso di jQuery? – Julian

Sicuro; la domanda viene aggiornata per funzionare ora completamente su JavaScript nativo. –

Non è necessario creare le immagini intermedie. Il metodo drawImage può prendere un'altra tela direttamente come l'immagine da disegnare. –

Forse qualcosa di simile, esportare la tela di origine a un'immagine, dipingere l'immagine sulla tela di destinazione (non testata):

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

fonte

2013-04-18 12:41:03

metodo drawImage di una tela può effettivamente prendi un'altra tela invece di un'immagine: non è necessario convertire prima le tele in immagini. (Vedere la WhatWG's documentation.)

Ho semplificato JSFiddle di Allendar dimostrare:

http://jsfiddle.net/7hEKL/

In sostanza, tutto quello che dovete fare è:

targetCanvas.drawImage(sourceCanvas, 0, 0);

e si dovrebbe essere pronti per partire.

fonte

2013-04-19 15:52:19

Come posso inserire più elementi canvas in un elemento canvas?

risposta

Problemi correlati