HTML5 utilise la méthode drawImage() pour dessiner des images_html5 conseils du didacticiel

1. Dessinez une image

Utilisez la méthode drawImage() pour dessiner une image. L'environnement de dessin propose trois versions différentes de cette méthode.
drawImage(image,x,y) : dessinez l'image en (x,y) dans le canevas.
drawImage(image,x,y,width,height) : dessinez l'image à (x,y) dans le canevas et redimensionnez-la à la largeur et à la hauteur spécifiées.
drawImage (image, source Et dessinez-le en (x,y) dans le canevas.

2. Balise

Avant de dessiner l'image, vous devez charger l'image dans le navigateur. Ici, nous ajoutons simplement une balise après la balise canvas.



3. Dessinez des images

Copiez le code

Le code est le suivant :

>
/javascript" charset = "utf-8">
//Cette fonction sera appelée une fois la page complètement chargée.
function pageLoaded()
{
//Obtenir une référence au Notez que le nom du tCanvas doit être le même que celui-ci. Les identifiants dans le corps sont les mêmes
var canvas = document.getElementById('tCanvas'); canvas
var context = canvas.getContext('2d');
//Obtenir la référence de l'objet image
var image = document.getElementById('tkjpg'); image à (0,50)
context.drawImage(image,0,50)
//Réduire l'image à la moitié de sa taille d'origine
context.drawImage(image,200,50,165/2,86); /2);
//Dessiner une partie de l'image (couper 0,7 à partir du coin supérieur gauche de l'image) )
context.drawImage(image,0,0,0.7*165,0.7*86,300,70, 0,7*165,0,7*86);
}
/head>
canvas width = "500" height = "200" id = "tCanvas" style = "border:black 1px solid >

Conseils : Votre navigateur ne prend pas en charge la balise

>



4. Effet de dessin


5.