Ist es möglich, zu zeichnen, die auf mehrere Leinwände auf einmal?

Alle meine Leinwand zeichnen-Funktionen starten, so etwas wie dieses:

function drawMe(){

    var canvas = document.getElementById('canvas-id');

    var ctx = null;

    ctx = canvas.getContext('2d');

    ...
}

Allerdings will ich jetzt ziehen Sie das gleiche Bild auf eine (variable) Anzahl von Leinwänden, gibt es eine alternative zu getElementById() (vielleicht in jQuery?) kann verwendet werden, um leicht greifen mehr als eine auf einmal?

Dank!

Josh

InformationsquelleAutor Joshua | 2011-08-04
  1. 5

    Zeichnung auf mehrere Leinwände, die extrem ineffizient, weil rendering ist eine der teuersten Operationen, die Sie tun können.

    was Sie tun möchten, ist die Verwendung von Puffer. Sie können ziehen Sie einfach von einer Leinwand zur anderen.

    var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

ctx1.fillStyle = "black";
ctx1.fillRect(10, 10, 10, 10);

ctx2.drawImage(canvas1, 0, 0);

    hier ein fiddle.

    denken Sie daran, Sie müssen nur anrufen ctx.drawImage einmal, nachdem Sie fertig sind mit allen Zeichnung auf der ersten Leinwand.

    InformationsquelleAutor wildcard
  2. 2

    Mit jQuery, wenn Sie $('.bla'), werden alle Elemente der Klasse 'blah'. Also, wenn Sie geben alle Ihre Leinwände, die Klasse konnte lediglich Durchlaufen Sie alle und ziehen auf die jeweils an dieser Stelle.

    Es ist ideal, um all die Zusammenhänge nur einmal, also, es sei denn drawMe wird nur einmal aufgerufen, Sie sollten sammeln alle Kontexte auf, die nur einmal und dann übergeben Sie dieses array in drawMe jedes mal, wenn es aufgerufen wird.

    InformationsquelleAutor Simon Sarris
  3. 2

    Interessant... ich bin sicher, es ist nicht die beste Lösung (ich bin mir nicht ganz sicher, es wird funktionieren!), und Sie übernimmt eine Klasse, die zu identifizieren, die Ihre Leinwand, aber versuchen Sie dies:

    var canvases, contexts, imgdata = 0;

function init() {
  canvases = document.getElementsByClassName('cvs-class');
  contexts = [];
  for(var i = 0; i < canvases.length; i++) {
    contexts[i] = canvases[i].getContext('2d');  //initialize each canvas with context.
  }
}

function drawToCanvas() {
  //Do your drawing on canvases[0];
  imgdata = contexts[0].getImageData(0,0,canvases[0].width,canvases[0].height);
  paintToAllContexts();
}

function paintToAllContexts() {
  for(var i=0; i<canvases.length; i++) {
    contexts[i].putImageData(imgdata,0,0);
  }
}

function document.getElementsByClassName(class) {
  var nodes = [];
  var cl = new RegExp('\\b'+cl+'\\b');
  var el = this.getElementsByTagName('*');
  for(var i = 0; i < el.length; i++) {
    var cls = el[i].className;
    if(cl.test(cls)) nodes.push(el[i]);
  }
  return nodes;
}
    InformationsquelleAutor stslavik
  4. 2

    Wenn Sie zeichnen ein Komplexes Bild auf mehrere Leinwände, könnte es besser sein:

    1. Zeichnen ein Komplexes Bild auf die erste Leinwand.
    2. Paste, die Leinwand auf die andere Leinwand über drawImage() (das kann eine Leinwand parameter).

    Diese Weise können Sie einfach kopieren Sie die Pixel im Bild eher als das zeichnen etwas kompliziert immer wieder. Wenn es nur ein einziges Bild, obwohl, ist es wahrscheinlich besser, nur zu zeichnen, die direkt wie die anderen Antworten vorschlagen.

    InformationsquelleAutor AshleysBrain
  5. -1

    Geben Sie jedem Bild eine Klasse und eine Schleife durch jedes canvas-Element mit der Klasse.

    InformationsquelleAutor tskuzzy
  6. -2
    var allCanvases = document.getElementsByTagName('canvas');
    InformationsquelleAutor Shock
Schreibe einen Kommentar