Notes d'étude préliminaires de Html5 Canvas (11) - Opération simple sur l'image

Cet article présente des opérations d'image simples. La première est l'affichage simple d'images

L'effet est le suivant :

consiste à afficher une image simple au format jpg sur la page web. C'est également très simple à mettre en œuvre. Le code est le suivant :

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

.

Créez d'abord un objet Image, puis définissez l'attribut src de l'image objet au chemin relatif de l'image, Enfin, réécrivez la méthode onload pour l'afficher une fois l'image chargée.

Ce qui suit décrit comment exporter les graphiques que nous avons dessinés en images. L'effet est le suivant :

<.>

En fait, il n'y a rien de spécial dans l'effet. Regardons principalement le code Le code est le suivant :

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);
}

Après

AVC, on passe canvastoDataURL de 🎜> exporte ce que nous avons dessiné auparavant sous forme de données url, et le format est le suivant :

Il y en a bien d'autres par la suite Bref, nous les avons transformés en image, que nous pouvons exporter et afficher à travers ces quelques phrases.

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

Ce qui précède est le contenu des notes d'étude préliminaires de Html5 Canvas (11) - opérations d'image simples. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). )!

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