drawImage (canvas) funktioniert nicht

Ich will zeichnen Sie mehrere Leinwände, die auf einer einzigen Leinwand mit drawImage() Methode, aber es funktioniert nicht
Code

<html>
 <head>
  <script>
    window.onload = function() {
    var context1= document.getElementById("canvas1").getContext("2d");
    var context2  = document.getElementById("canvas2").getContext("2d");
    var context3  = document.getElementById("canvas3").getContext("2d");

    context1.font = "20pt Calibri";
    context1.fillStyle = "blue";
    context1.fillText("Hello ", 50, 25);

    context2.font = "20pt Calibri";
    context2.fillStyle = "red";
    context2.fillText("World!", 100, 25);

    var imageObj = new Image();
     imageObj.onload = function() {
      context3.drawImage(context1.canvas, 50, 25);
      context3.drawImage(context2.canvas, 100, 25);
        };
  };

</script>
 </head>
<body>
<canvas id="canvas1" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas2" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas3" class="canvas" width="200" height="50"></canvas>
</body>
</html>​

JS Fiddle
http://jsfiddle.net/4xT2j/2/

Ihre Bilder haben keine Quelle. Was erwartest du zu sehen ?
Quelle sind die Leinwände

InformationsquelleAutor Muhammad Usman | 2012-06-07

  1. 5

    Ihre Bilder haben keine Quelle. Hinzufügen, wenn Sie wollen, etwas zu sehen.
    Die onload-Funktion kann nicht aufgerufen werden, solange Sie keine src.

    Sein und Sie müssen das Bild, um die drawImage-Funktion :

     var imageObj = new Image();
 imageObj.onload = function() {
   context3.drawImage(imageObj, 50, 25);
   context3.drawImage(imageObj, 100, 25);
 };
 imageObj.src = "someFile.png";

    Wenn das, was Sie versuchen zu tun ist, ziehen canvas1 und canva2 auf context3, einfach tun, all dies außerhalb der imageObj.onload-Funktion, die nie aufgerufen wird : http://jsfiddle.net/KCyvE/

    Eine präzise folgende Frage im Kommentar :

    Mein code in der Geige verwendet context1.canvas. Dies funktioniert, weil Der Kontext ist eine Instanz von CanvasRenderingContext2D und hat somit eine Eigenschaft mit dem Namen canvas was ist ein "Zurück-Verweis auf das canvas-element, für die in diesem Kontext erstellt wurde".

    Ich möchte hinzufügen Leinwände nicht jedes Bild
    So erstellen Sie nicht ein ImageObj. Wenn das, was Sie versuchen zu tun ist, ziehen canvas1 und canva2 auf context3, einfach tun, all dies außerhalb der imageObj.onload-Funktion, die nie aufgerufen wird.
    dann, wie kann ich es tun
    Ich habe eine fidlle zu erklären, dass man Sie einfach entfernen Sie die ImageObj und einfach den Inhalt der onload.
    Entschuldigen Sie mich, nach Ihren code auf jsfiddle, fand ich dieses instrument: "context1.die Leinwand". Was bedeutet das? Bitte helfen Sie mir, geben Sie mir einige Referenzen, ich finde keine Erklärung auf die htmlV Skillung und vielen anderen lieber als chrome developer ' s Hinweis...

    InformationsquelleAutor Denys Séguret

  2. 1

    Ihre imageObj.onload Funktion ist etwas falsch. Dies ist, was Sie wollen: http://jsfiddle.net/4xT2j/3/

    Bitte beachten Sie es ist nicht unbedingt ein Grund zu schreiben canvas3, um ein image-Objekt, da es bereits ein Bild-Objekt.

    InformationsquelleAutor bennedich

Schreibe einen Kommentar