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
>
HTML5 /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
>
