Traduction
Tutoriel Canvas - sommaire
Tutoriel Canvas - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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 non).
L'image à insérer dans le canevas est déjà une image de la page.
Image insérée via la balise IMG donc fait partie du DOM.
Ci-dessous le canevas avec cette image insérée deux fois :
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).
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 une fonction anonyme 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 : instance objet Image, 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).
Rien n'interdit d'insérer des images trouvées sur la "toile".
Naturellement les images ne s'afficheront que si vous disposez d'une connection internet.
Ci-dessous le deuxième canevas de cette page avec insertion de deux minuscules images récupérées sur un site.
La balise Canvas est un élément HTML de la page, donc on peut lui appliquer toutes les propriétés CSS relatives aux boites HTML !
Ici la boite Canvas est remplie avec un superbe dégradé linéaire CSS et dispose d'un ombrage et d'angles arrondis.
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.
il faudrait faire la même chose pour insérer dans un canevas des images du site mais ne faisant pas partie du DOM
de la page ; le chemin serait alors plus simple ...
Les deux images après avoir été ajoutées au DOM sont insérées dans le canevas avec agrandissement (d'où le flou)
en haut à gauche pour la terre et au milieu pour la lune.