Accueil

Traduction

Tutoriel Canvas - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Canvas : incorporation d'une image dans le canevas

Dans cette page je vais vous montrer comment insérer une image matricielle existante dans un canevas.
Il peut s'agir d'une image faisant déjà partie du DOM de la page ou pas encore ; le script est légèrement différent.

Insertion dans le canevas d'une image du DOM


Comme vous le voyez ci-dessus, l'image qui est destinée à être insérée dans le canevas apparait déjà dans la page ; donc fait partie du DOM de cette page.

Ci-dessous le canevas avec cette image insérée deux fois dans le canevas.

Dimensions natives de l'image 900 par 600 donc un rapport de 1,5 entre largeur et hauteur.

La même image bitmap est insérée deux fois mais à des endroits différents et avec des dimensions différentes ; première fois avec sa taille d'origine et une deuxième fois avec une réduction (mais respect des proportions : 450 par 300).

Le code HTML

Le script correspondant

Si vous essayez d'appeler drawImage avant le chargement de la page il ne se passera rien.
Il faut donc appeler cette méthode sur chargement de la page.
La méthode doit donc être dans le cadre d'une fonction appelée lors du chargement de la page : window.onload =function()

L'image est insérée deux fois dans la zone de dessin mais à des positions différentes via une fonction qui est déclenchée dès que la page est chargée.
Pour les deux insertions on utilise la fonction drawImage avec cinq paramètres : référence objet, x, y (x et y étant les coordonnées de l'image dans le canevas), largeur et hauteur de l'image dans le canevas.
Les deux derniers paramètres de la méthode sont facultatifs ; dans ce cas l'image est insérée avec ses dimensions natives. C'est le cas de la première insertion (qui occupe donc tout le canevas).

Insertion dans un canevas d'images qui ne font pas partie du DOM de la page

Ci-dessous le deuxième canevas de cette page avec insertion de deux images stockées sur mon ordinateur : lune.gif & terre.gif.

Le code HTML

Dois-je rappeler que canvas est un élément HTML à qui on peut appliquer les propriétés CSS : border-radius, box-shadow, background, etc. ?

Le script correspondant

Nouveautés dans le script : création de nouvelles instances de la classe Image.
En effet comme ces deux images ne sont pas dans le DOM de la page, il faut les ajouter via le script. Il faut aussi préciser la source de chaque nouvel objet de type Image.