Sommaire partiellement masqué - faites défiler !
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 pas encore ; le script est légèrement différent.
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).
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).
Ci-dessous le deuxième canevas de cette page avec insertion de deux images stockées sur mon ordinateur : lune.gif & terre.gif.
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. ?
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.