position image sur canvas
Bonjour,
J'utilise la fonction draw du contexte canvas HTML5 et j'ai une erreur.
j'ai un tileset (de 128 x 512 px)dans une image temporaire en mémoire qui se nomme "imgset" et la fonction ctx.draw y copie une portion de 32x32 pixels pour la coller sur le canvas.
Résultat :
- L'image collée fait un peu plus que 96px en hauteur au lieu de 32px que j'ai précisé dans la fonction draw().
- L'image collée fait aussi 16px de plus en largeur que les 32px que j'ai précisé dans la fonction.
Donc, l'image collée sur le canvas est plus grande en hauteur et en largeur que ce que j'ai demandé dans la fonction.
Savez-vous d'où cela peut venir ?
Code:
1
2
3
4
| /* Fonction javascript où ctx est le contexte du canvas.
Pour rappel :
ctx.draw(imagesource, Xsource, Ysource, W_source, H_source, Xdest, Ydest, W_dest, H_dest) */
ctx.drawImage(imgset,imgX,imgY,32,32,0,0,32,32); |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| /* Style CSS du canvas et du DIV qui est pardessus et contenant une grille au pas de 32x32 en background.*/
canvas
{
position:absolute;
left:0px;
top:0px;
margin:0px;
padding:0px;
width:480px;
height:480px;
background-color:cyan;
display:block;
background-repeat: no-repeat;
}
#grille
{
position:absolute;
left:0px;
top:0px;
margin:0px;
padding:0px;
background-repeat: no-repeat;
background-image:url(grille.png);
display:block;
width:480px;
height:480px;
} |
A l'écran, j'ai bien ma grille par dessus le canvas, je ne pense pas que ce soit elle qui fasse problème.
Mais l'image collée par ctx.draw() sur le canvas est trop déformée en largeur et hauteur.
La position de l'image collée sur le canvas se colle parfaitement en 0,0.
EDIT :
Si je rajoute :
Code:
ctx.drawImage(imgset,32,0); // Affiche imgset en x=32 et y=0.
Juste avant le draw de copie ....ça donne ça :
Code:
1
2
| ctx.drawImage(imgset,32,0);
ctx.drawImage(imgset,imgX,imgY,32,32,0,0,32,32); |
je m'apperçois alors que mon image source imgset est positionnée par le premier drawImage() en 32+16,0 alors que j'ai demandé 32,0 et elle est aussi agrandie.
Donc je pense que ça doit être le canvas qui est en cause ?
PS : Merci Bovino pour la modération^^
