DESSINER AVEC HTML5 – OBJET CANVAS Images statiques

Transcription

canvas_statistiques_partie1.odt
DESSINER AVEC HTML5 – OBJET CANVAS
Images statiques – première partie
Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme
img, est une balise de type inline qui peut avoir les attributs suivants :
• width
• height
• id
Par défaut les dimensions sont de 300 par 150 pixels
Avec canvas on peut réalises des dessins statiques ou animés en 2D. Donc canvas remplace Flash
Dans ce premier tutoriel nous allons traiter des images statiques. Dans un deuxième tutoriel nous
traiterons des animations.
Nous n'utiliserons pas la librairie jquery et pourtant le code HTML et JAVASCRIPT seront bien
dissociés : plus aucune référence au JS dans le code HTML.
1
DESSINER DES RECTANGLES
Un carré n'est une forme particulière de rectangle !
1.1
LA PAGE NOMMÉE 'RECTANGLES_VIDES.HTM'
1.1.1 LE CODE LA PAGE
...
<style>
canvas { display : block ; border: 1px solid black; margin-left : auto ; margin-right : auto ;
margin-top : 50px ; }
</style></head>
<body>
<canvas width = '300' height = '300'>
<p>Votre navigateur est obsolète</p>
</canvas>
<script>
var canvas = document.querySelector('canvas');
var contexte = canvas.getContext('2d');
contexte.strokeRect(20,20,100,100);
</script>
</body></html>
1.1.2 APERÇU
9 carrés de 100 par 100
Chaque carré a son arête supérieure gauche décalée de 20 pixels à droite et en bas par rapport au précédent
1.1.3 COMMENTAIRES
Du CSS :
1 sur 17
L'objet de type canvas a été transformée en objet de type block afin de pouvoir le centrer horizontalement
Du HTML :
La boîte aura une taille de 300 par 300
Si vous testez cette page avec un vieux navigateur le message : "votre navigateur est obsolète" va apparaître
Du JAVASCRIPT :
La variable canvas référence la balise canvas.
On a utilisé la nouvelle méthode querySelector qui peut être argumenté avec un nom de balise ou un
nom de classe ou un nom d'id
La variable contexte va chercher l'API de dessin 2D et l'appliquer à la variable canvas
Une API de dessin 3D est prévue à terme ...
La fonction strokeRect() permet de dessiner les contours d'un rectangle
Syntaxe de cette fonction strockeRect(x,y, largeur, hauteur)
avec x et y sont les coordonnées de l'arête supérieure gauche du rectangle
Par défaut le contour est en noir avec une largeur de 1pixel
1.1.4 EMPLACEMENT DUS SCRIPT JS
Le script est automatiquement appelé puisqu'il il est inséré dans la partie body après code HTML
Attention si le script JS est dans la partie body mais avant la balise canvas vous aurez le message d'erreur
suivant : canvas is null en effet on ne peut manipuler en JS un objet HTML qui n'existe pas encore !
1.2
1.2.1
LA PAGE NOMMÉE 'RECTANGLES_PLEINS.HTM'
APERÇU
1.2.2 LE CODE
Seule le code JS est changé par rapport à la page précédente :
<script>
var canvas = ...
;
var contexte = ...
contexte.fillStyle = "rgba(255,0,0,0.5)" ;
for (i=1; i<=8; i++)
{
contexte.translate(20,20) ; // déplacement origine pour rectangle suivant
contexte.fillRect(0,0,100,100); // dessiner un rectangle plein
} // fin for
// huit rectangles décalés
</script>
...
1.2.3 COMMENTAIRE
La méthode fillStyle permet de définir une couleur de remplissage. On peut utiliser une couleur transparente
avec la notation rbga (La quatrième valeur est l'alpha)
La méthode translate(x,y) permet de déplacer le point d'origine. Lors de chaque passage dans la boucle on
déplace le point d'origine de 20 pixels à droite et en bas
2 sur 17
Donc pour chaque rectangle l'arête haut et gauche est toujours la nouvelle origine (0,0)
La méthode fillRect crée des rectangles pleins
Syntaxe de fillRect(x,y, largeur, hauteur)
avec x et y coordonnées de l'arête supérieure gauche du rectangle
1.3
LA PAGE NOMMÉE 'RECTANGLES_VIDES_ET_PLEINS.HTM'
Dans cette page il y a deux canvas de 300 par 300.
Pour les distinguer les deux zones de dessin il faut bien sûr utiliser un id différent !
1.3.1 APERÇU
1.3.2 COMMENTAIRES
Dans le canvas de gauche 8 rectangles vides avec un contour vert de 5 pixels d'épaisseur
Dans le canvas de droite 8 rectangles pleins de couleur verte (lime) avec un alpha de 0.5
A chaque fois il y a un décalage de 20 pixels à droite et à gauche de l'arête haute et gauche du rectangle par
rapport au précédent.
1.3.3 LE CODE (EXTRAITS)
...
<style>
canvas { display : inline-block ; border: 1px solid black; margin : 20px ; }
</style></head>
<body>
<canvas width = '300' height = '300' id = 'dessin1'>
<p>Votre navigateur est obsolète</p>
</canvas>
<script>
var canvas1 = document.querySelector('#dessin1');
var contexte = canvas1.getContext('2d');
contexte.strokeStyle = 'green';
contexte.lineWidth = '5' ;
for (i=1; i<=8; i++)
{
...
;
// déplacement du point d'origine
...
;
// dessiner rectangle vide
}
</script>
<canvas width = '300' height = '300' id = 'dessin2'>
...
</canvas>
<script>
var canvas2 = document.querySelector('#dessin2');
...
</script>
</body></html>
1.3.4 ANALYSE DU CODE
Du CSS :
3 sur 17
Display : inline-block pour créer des boîtes 'en ligne' c'est à dire sans saut de ligne !
Du JS :
Deux scripts JS :
• l'un après le premier canvas
• l'autre après le deuxième canvas
La méthode strokeStyle() pour définir une couleur de contour
La méthode lineWidth() pour définir l'épaisseur du contour
On doit produire 8 rectangles donc on crée une boucle qui est répété 8 fois
1.4
1.4.1
EXERCICE : LE DRAPEAU SUISSE
APERÇU
1.4.2 COMMENTAIRE
Canvas de 400 par 400
Drapeau : 200 par 200 au centre du canvas donc arête supérieure gauche du rectangle rouge a les
coordonnées suivantes :
x : 400 /2 - 200 / 2 = ...
y : ...
A l'intérieur du rectangle rouge deux rectangles blancs :
• un rectangle de 140 par 40 centré verticalement dans drapeau donc arête supérieure gauche de ce
rectangle dans le drapeau est : x = (200 – 140) / 2 = 30 ; y = (200 - 40) / 2 = 80
Donc arête supérieure gauche par rapport à canvas : x = 30 +100 ; y = 80 +100
• un rectangle de 40 par 140 centré horizontalement dans drapeau donc arête supérieure gauche de ce
rectangle dans le drapeau est : x = (200 - 40) / 2 = 80 ; y = (200 – 140) / 2 = 30
1.4.3 LE CODE DE LA PREMIÈRE VERSION : 'DRAPEAU_SUISSE.HTM'
...
<body>
<canvas width = '400' height = '400'> <p>...</p>
</canvas>
<script>
var canvas = ...
var contexte = ...
...
= 'red';
contexte.fillRect(...
contexte.clearRect(130,180,140,40);
// attention coordonnées de l'arête supérieure gauche de la bande par rapport à canvas !
contexte.clearRect(...
</script>
</body></html>
1.4.4 ANALYSE DU CODE
La méthode clearRect() est une gomme qui efface l'équivalent d'un rectangle
Syntaxe de clearRec(x, y , largeur, hauteur)
avec x et y coordonnées de l'arête supérieure gauche du rectangle
4 sur 17
1.4.5 CRITIQUES DU CODE
Pour dessiner les deux bandes d'effacement il faut d'abord déterminer les coordonnées de l'arête supérieure
gauche des deux bandes dans le drapeau et ensuite dans le canvas. C'est fastidieux ... Le raisonnement serait
plus simple si on faisait un changement d'origine !
1.4.6 'DRAPEAU_SUISSE_BIS.HTM'
Dans cette version les coordonnées de l'arête supérieur des bandes sont déterminées par rapport à l'arête
supérieure gauche du drapeau
Le canvas fait 400 par 400 ; le drapeau de 200 par 200 est centré dans canvas
Extrait du script :
...
contexte.fillStyle = 'red';
contexte.fillRect(100,100,200,200) ;
contexte.translate(100,100);
...
5 sur 17
2
2.1
TRACER DES LIGNES DROITES
LA PAGE NOMMÉE 'CROIX_SAINT_ANDRE.HTM'
2.1.1 APERÇU
Canvas de 200 par 200. Croix de Saint André centrée dans le canvas
Première droite démarre à 50, 50 et se termine à 150,150
Deuxième droite démarre à 150,50 et se termine à 50, 150
2.1.2 LE CODE DE LA PAGE (EXTRAITS)
...
<body>
<canvas width ='200' height ='200'>
<p>Votre navigateur ... </p></canvas>
<script>
canvas = ...
;
contexte = ...
;
X = canvas.width ;
Y = canvas.height;
// donc X vaut ...
et Y vaut : ...
contexte.beginPath();//On démarre un nouveau tracé
contexte.moveTo(X/4, Y/4); // on place le stylo au point 50, 50
contexte.lineTo(X-X/4,Y-Y/4); // première droite
contexte.moveTo(X-X/4, Y/4);
contexte.lineTo(X/4,Y-Y/4); // deuxième droite
contexte.lineWidth = 3 ; // épaisseur du trait
contexte.stroke() ; //tracer les droites
</script>
...
2.1.3 COMMENTAIRE
Il est très facile de récupérer les dimensions du canvas avec les propriétés JS width et height
Il faut tracer deux diagonales !
La méthode beginPath() indique le début du tracé
La fonction moveTo permet de placer le stylo
La fonction lineTo permet de tracer (mais sans encre) la première droite
On déplace le stylo (moveTo) puis on trace la deuxième droite (lineTo)
Ensuite il faut utiliser l'encre : fonction stroke() pour tracer effectivement les droites avec l'épaisseur
précisée par la propriété lineWidth
2.1.4 LES SYNTAXES
La méthode moveTo(x,y) avec x et y : coordonnées du point de départ de la droite
La méthode lineTo(x,y) avec x et y : coordonnées du point d'arrivée de la droite
2.1.5 REMARQUES
Les points de départ et d'arrivé des droites sont définies par rapport aux dimensions du canvas. Donc
on peut modifier la taille du canvas sans qu'il soit nécessaire de modifier le code de la fonction JS
2.1.6 TESTS
Redimensionnez canvas : 300 par 300 et testez
Redimensionnez canvas : 400 par 400 et testez
6 sur 17
2.2
2.2.1
LA PAGE NOMMÉE 'PARALLELOGRAMME'
APERÇU
2.2.2 COMMENTAIRE
La forme dans canvas :
• point de départ de la forme : 100, 50
• point d'arrivée première droite : 250,50
• point d'arrivée deuxième droite : 200, 250
• point d'arrivée troisième droite : 50, 250
• point d'arrivé quatrième droite = point de départ première droite
• contour de la forme de 3 pixels en vert
• fond de la forme remplie de rouge
2.2.3 LE CODE DE LA PAGE (EXTRAIT)
...
<body>
<canvas ...
</canvas>
<script>
...
contexte.beginPath();//On démarre le tracé
contexte.moveTo(100,50);
contexte.lineTo(...);
contexte.lineWidth = 3 ;
// épaisseur du trait de contour
contexte.strokeStyle ='green'; // couleur contour
contexte.stroke() ;
//tracer le contour
contexte.fillStyle ='red';
// couleur de fond
contexte.fill() ;
// colorier le fond
</script>
...
2.2.4 COMMENTAIRE
2.3
UN TRIANGLE
2.3.1 APERÇU DE LA PAGE "TRIANGLE.HTM"
Canvas de 300 par 300 ; triangle avec fond rouge et borduré de vert
7 sur 17
2.3.2 LE CODE DE LA PAGE (EXTRAIT)
...
<body>
<canvas ...
</canvas>
<script>
...
contexte.beginPath();
// début de la forme
contexte.moveTo(0, 300);
//On se déplace au coin inférieur gauche
// première droite jusque 150,0
// deuxième droite jusque 300, 300
// troisième droite jusque 0, 300
...
='green';
...
=3;
contexte.stroke();
...
='red';
contexte.fill();
</script>
...
2.3.3 LA PAGE NOMMÉE "TRIANGLE_BIS.HTM"
Le code de la fonction doit être indépendant de la taille du canvas. Il faut donc utiliser les variables X et Y
représentant respectivement la largeur et la hauteur du canvas
Testez le code JS avec un canvas de 200 par 200 puis de 400 par 400
2.4
EXERCICE : LA PAGE NOMMÉE 'TRIANGLES.HTM'
2.4.1 APERÇU
9 triangles isocèles et rectangles ; Les côtes de l'angle droit valent 100px
Le premier rectangle a son angle rectangle qui coïncide avec l'arête supérieure gauche de canvas ; le suivant
est décalé à droite et en bas de 50
Les triangles sont bordurés de violet (épaisseur de 5) et sont remplis de vert olive
2.4.2
LE CODE DE LA PAGE (EXTRAIT)
...
<body>
<canvas ...
</canvas>
<script>
...
...
= 'purple';
...
= '5';
...
='olive';
for (i=1; i <= 9; i++)
{
8 sur 17
contexte.beginPath() ;
contexte.moveTo(0,0);
contexte.lineTo(...) ;
contexte.lineTo(...) ;
...
;
...
;
contexte.translate(50,50);
} // fin for
</script>
...
2.5
// début forme
// remplir le fond
// dessiner contour
// déplacement point d'origine
LA PAGE NOMMÉE 'SERGENT_CHEF.HTM'
Dans l'armée française et pour les sous officiers subalternes les insignes de grade sont des chevrons dorés (ou
argentées). Un sergent : 2 chevrons ; un sergent chef : 3 chevrons
2.5.1 APERÇU
Chevrons d'épaisseur 20 et de couleur or
Premier chevron :
point de départ : 30, 100
première droite jusqu'à 100, 30
deuxième droite jusqu'à 170, 100
Pour le chevron suivant le y du point de départ augmente de 40
2.5.2 LE CODE JS (EXTRAIT)
...
...
= "gold";
...
= 20;
for (...
)
{
...
(30,100);
...
(100,30);
...
(170,100);
contexte.stroke();
...
(0,40);
} // fin for
9 sur 17
3
TRACER DES CERCLES ET ARCS DE CERCLE
3.1
LA PAGE 'CERCLES.HTM'
Deux cercles dans le même canvas
3.1.1 APERÇU
3.1.2 COMMENTAIRE
Dimensions du canvas : 200 par 200
Deux cercles de rayon de X/4
Un cercle plein (en jaune) et à côté le contour d'un autre cercle (épaisseur de 5px et couleur orange)
Premier cercle a pour centre : X/4 et Y/4
Deuxième cercle a pour centre : X/2 et Y/2
...
contexte.beginPath(); // début premier cercle
contexte.arc(X/4, Y/4, X/4, 0, Math.PI*2); //On trace la courbe délimitant notre forme
...
='yellow';
contexte.fill();
contexte.beginPath(); //début deuxième cercle
contexte.arc(...); //On trace la courbe délimitant notre forme
...
= 5;
....
= 'orange';
contexte.stroke();
3.1.4 SYNTAXE
Pour dessiner des arcs de cercle et des cercles il faut utiliser la méthode arc
Syntaxe de la méthode : arc(x, y, rayon, angle départ, angle fin [, sens inverse])
x et y sont les coordonnées du centre du cercle
angle de départ et angle de fin sont exprimés en radians
le sens inverse est facultatif (par défaut false). Si vous tapez true alors vous dessinez un arc de
cercle dans le sens inverse des aiguilles d'une montre
Un cercle complet c'est un arc de cercle de 360° ou 2 * Π radians
3.1.5 PASSAGE DEGRÉS À RADIANS
On a l'habitude de raisonner en degrés et non pas en radians. Le tableau ci-dessous vous aide à faire le
passage degrés – radians
10 sur 17
Grâce au dessin ci-dessus vous pouvez remplir le tableau ci-dessous
degrés
radians
45
...
90
...
135
...
180
Π
225
...
270
...
315
...
360
2*Π
3.1.6 TESTS
Essayez avec un canvas de 300 par 300
Essayez avec un canvas de 400 par 400
3.2
3.2.1
EXERCICE 1 : LA PAGE NOMMÉE 'SENS_INTERDIT.HTM'
APERÇU
3.2.2 COMMENTAIRE
Cercle plein au centre du canvas avec un rayon de 100
Bande d'effacement de 160 par 40 au centre du cercle donc au centre du canvas. Donc arête supérieure
gauche de cette bande d'effacement est
• x = 150 – (160/ 2) = ...
• y = 150 – (40/2) = ...
3.2.3 LE CODE DE LA PAGE
...
</style>
<script>
window.onload = function()
{
canvas = ...
;
contexte = ...
;
contexte.beginPath(); //On démarre cercle plein
contexte.arc(...
); //On trace la courbe délimitant notre forme
...
='red';
contexte.fill();
contexte.clearRect(...);
}
</script></head>
<body>
<canvas width = '300' height ='300'><p>Votre navigateur est obsolète</p></canvas>
</body></html>
11 sur 17
3.2.4 REMARQUE
Le script JS est écrit dans la partie head de la page !
Le code JS correspondant à la création de la forme est intégrée dans une fonction anonyme.
Cette fonction est appelée lors du chargement de la page window.onload =function()
C'est l'équivalent en JQUERY de : $(document).ready(function()
3.3
3.3.1
EXERCICE 2 : LA PAGE NOMMÉE 'DEMI_CERCLES.HTM'
APERÇU
3.3.2 COMMENTAIRE
Chaque demi-cercle a un rayon de 50 (ou X/6)
Centre du premier demi-cercle (100, 100) ou (X/3, Y/2)
Centre du deuxième demi-cercle (200, 100) ou (X/3*2, Y/2)
Les deux demi-cercles ont un fond orange
3.3.3 LE CODE DE LA FONCTION ANONYME
...
X = ...
;
Y = ...
...
='orange';
;
...
; //premier demi cercle
contexte.fill();
...
; //deuxième demi-cercle
contexte.fill();
...
3.3.4 TEST
Testez avec un canvas de 600 par 400 puis de 150 par 100
3.3.5 VARIANTE : DEMI_CERCLES_ BIS.HTM
Epaisseur du trait 5 pixels ; couleur du trait : orange
Reconstituez le code de cette page en vous inspirant de la page précédente
3.4
EXERCICE : LA PAGE NOMMÉE 'COEUR_VIDE.HTM'
Nous devons dessiner un coeur
12 sur 17
3.4.1
ANALYSE DU PROBLÈME
Cette image nous montre qu'il s'agit de quatre arcs de cercle appartenant à quatre cercles contigus.
3.4.2 SOLUTION
Les quatre cercles ont pour centre (x , y) :
• cercle haut gauche : 100, 100
• cercle haut droit : 200,100
• cercle bas gauche : 100, 200
• cercle bas droit : 200, 200
cercle
arc de cercle dans ce cercle (en radians)
haut gauche
de 0,5 à 2
haut droit
de 1 à 0,5
bas gauche
de1,5 à 2
bas droit
de 1 à 1,5
Contour des arcs : rouge avec une épaisseur de 5
3.4.3 LE CODE LA FONCTION (EXTRAIT)
...
contexte.arc(100, 100, 50, 0.5 * Math.PI, 2 * Math.PI); // premier arc de cercle
contexte.stroke();
contexte.arc(200, 100, 50,Math.PI, Math.PI * 0.5); // deuxième arc de cercle
contexte.stroke();
...
3.5
3.5.1
EXERCICE : LA PAGE NOMMÉE 'COEUR_VIDE.HTM'
APERÇU
13 sur 17
les cercles hauts sont pleins
Remplissage de la zone délimitée quatre arcs de cercles de 90° appartenant aux quatre cercles
Les quatre arcs de cercle :
inscrit dans le cercle
arc de cercle
haut gauche
de 0 à 0.5 Π
haut droit
de 0.5 Π à Π
bas gauche
de 1.5 Π à 2 Π
bas droit
de Π à 1.5 Π
Il y a donc trois formes donc trois instructions : beginPath()
3.5.2 LE CODE DE LA FONCTION
...
contexte.fillStyle = 'red';
contexte.beginPath(); // premier cercle plein
...
contexte.beginPath(); // deuxième cercle plein
...
contexte.beginPath(); // forme à l'intérieur de quatre arcs de cercle
contexte.arc(...
contexte.arc(...
contexte.arc(...
contexte.arc(...
contexte.fill();
...
14 sur 17
4
IMPORTER IMAGES DANS CANVAS
L'un des intérêt majeur de canvas est de pouvoir importer des images et de les modifier.
L'importation basique peut se faire via la propriété CSS background-image (ou son équivalent en JS :
backgroundImage)
4.1
LA PAGE 'IMPORTER_IMAGE0.HTM'
4.1.1 APERÇU
Canvas de 800 par 600 (taille de l'image tortue.jpg)
On a ajouté à une image existante une bulle. Une bulle c'est un rectangle avec du texte plus un triangle
4.1.2 LE CODE DE LA PAGE
...
<style>
canvas { ... ;
background-image : url(tortue.jpg) ; }
</style></head>
<body>
<canvas width = '800' height = '600'>...</canvas>
<script>
...
...
= 'white' ;
...
(500,100, 300, 100); // rectangle à fond blanc
...
='navy'; // couleur du texte
...
='center';
...
= " bold italic 20px arial" ;
...
("Que c'est dur la vie !", 650, 150) ;
contexte.beginPath();//On démarre un nouveau tracé
contexte.moveTo(700, 200);//On se déplace au coin inférieur gauche
...
(750, 200);
...
(650, 280);
...
(700, 200);
...
= 'white'; // couleur de fond triangle de la bulle
contexte.fill() ;
</script>
...
4.2
EXERCICE : LA PAGE NOMMÉE 'IMPORTER_IMAGES_ALEATOIRE.HTM'
Dans la boîte canvas s'affiche de façon aléatoire l'une des cinq images et la légende correspondante à cette
image.
4.2.1 APERÇU
15 sur 17
4.2.2 LE CODE DU SCRIPT
<script>
...
var X = canvas.width ; var Y = canvas.height;
var tab_images = new Array('foret.jpg', 'tortue.jpg', 'jardin.jpg' , 'toucan.jpg', 'riviere.jpg') ;
var tab_legendes = new Array('la forêt', 'la tortue', 'le jardin' , 'le toucan', 'la rivière');
var rang = Math.floor(Math.random()* tab_images.length) ;
// retourne un entier compris entre 0 et 4 (si 5 images)
var nom_image = tab_images[rang]; // retourne le nom d'une des images
var url = "url(" + nom_image + ")"; // retourne le chemin de l'image
var legende = tab_legendes[rang];
canvas.style.backgroundImage = url ;
...
// création d'une bulle centrée horizontalement et de X/2 de large et haute de 100
// donc coordonnées de la bulle : X/4, 500
// insertion du contenu de la variable legende
// Texte centré verticalement et horizontalement dans la bulle
// couleur de texte : navy
// mise en forme du texte : bold italic 20px arial
</script>
4.3
LA MÉTHODE DRAWIMAGE()
Si vous voulez importer une image et :
• la positionner dans canvas
• et/ou la redimensionner
• et/ou la rogner
Vous devez alors utiliser la méthode JS drawImage() appliquée à un nouvel objet de type image
4.4
4.4.1
LA PAGE NOMMÉE 'IMPORTER_IMAGE1.HTM'
APERÇU
16 sur 17
Image de 800 par 600 est centrée horizontalement et verticalement dans canvas
...
var X = canvas.width; var Y = canvas.height;
var image = new Image();
image.src = 'tortue.jpg';
var x = (X - image.width) / 2 ;
var y = (Y - image.height) / 2 ;
contexte.drawImage(image,x,y);
4.4.3 LA MÉTHODE DRAWIMAGE
Ici nous avons utilisé la première syntaxe possible : drawImage(image, x,y)
Avec x et y coordonnées du coin supérieur gauche
4.5
4.5.1
LA PAGE NOMMÉE 'IMPORTER_IMAGE2.HTM'
APERÇU
L'image est redimensionnée : la largeur et la hauteur sont divisées par deux et cette image réduite est
positionnée au centre du canvas
...
var image = new Image();
image.src = 'tortue.jpg';
var largeur = (image.width) / 2 ;
var hauteur = (image.height) / 2 ;
var x = ...
var y = ...
contexte.drawImage(image,x,y,largeur,hauteur);
...
4.5.3 COMMENTAIRE
Ici nous avons utilisé la deuxième syntaxe possible : drawImage(image, x,y,largeur,hauteur)
avec :
• x et y coordonnées du coin supérieur gauche de l'image
• largeur et hauteur : dimension de l'image dans le canvas
17 sur 17

DESSINER AVEC HTML5 – OBJET CANVAS Images statiques

Transcription

Documents pareils

Papier photo, Kores 11962 Papier toile "CANVAS"

Business Modèle Canvas - Laval Mayenne Technopole

blouson canvas

Port Designs Chicago Eco Backpack

Télécharger le communiqué

Solvotex® art canvas 380

Télécharger le communiqué

vortex - Fall of Man

Sujets de TME