Vorläufige Studiennotizen zu Html5 Canvas (11) – Einfache Bildbedienung

In diesem Artikel werden einfache Bildvorgänge vorgestellt.

Der Effekt ist wie folgt:

dient dazu, ein einfaches Bild im jpg-Format auf der Webseite anzuzeigen. Es ist auch sehr einfach zu implementieren. Der Code lautet wie folgt:

var image = new Image();
image.src = "icon.jpg";
image.onload = function(){
 context.drawImage(image,50,50);
}

Erstellen Sie zuerst ein Image-Objekt und legen Sie dann das src-Attribut des -Objekts auf den relativen Pfad fest des Bildes. Schreiben Sie abschließend die Methode onload neu, um sie anzuzeigen, sobald das Bild geladen ist.

Im Folgenden wird beschrieben, wie die von uns gezeichneten Grafiken in Bilder exportiert werden. Der Effekt ist wie folgt:

Tatsächlich ist der Effekt nichts Besonderes. Schauen wir uns hauptsächlich den Code an:

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
//document.write(dataURL);
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}

Nach

Strich. Wir übergeben canvas<. die funktion style="font-family:Times New Roman">toDataURL von 🎜> exportiert das, was wir zuvor gezeichnet haben, als Daten-URL, und das Format ist wie folgt:

Danach gibt es noch viele weitere. Kurz gesagt, wir haben sie in ein Bild umgewandelt, das wir durch diese wenigen Sätze exportieren und anzeigen können.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....

Das Obige ist der Inhalt der vorläufigen Studiennotizen zu Html5 Canvas (11) – einfache Bildoperationen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!

var output = new Image();
output.src = dataURL;
output.onload = function(){
   context.drawImage(output,20,150);
}