Dans l'init(), comment charger une image sur un objet qui a été créé avant le init
j'aurais bien voulu savoir comment on fait pour charger une image sur l'objet aprés qu'il a été créé, parce que je crée l'objet en début de page JS et ensuite je voudrais y mettre son image à partir du init().
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
/* ****************** CLASSES ****************** */
class CObjet{
constructor(Image, PX, PY, Width, Height, Nom){
this.Image=Image;
this.PX=PX;
this.PY=PY;
this.Width=Width;
this.Height=Height;
this.Nom=Nom;
}
}
/* ******************* VARIABLES **************** */
var largeur=screen.width;
var hauteur=screen.height;
var image1=new Image();
var X1,X2,Y1,Y2=0;
var menu=false;
var monobjet=new CObjet(image1,100,200); // <----- PX et PY
/* ************** FONCTIONS *************** */
function anime(timestamp){
ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
animtimer=requestAnimationFrame(anime);
}
function init(){
ecran1.width=largeur;
ecran1.height=hauteur;
ctx1.width=largeur;
ctx1.height=hauteur;
image1.onload=function(){
monobjet.Image=image1;
}
// Image à charger pour l'objet.
image1.src='citrouille.png';
var animtimer=requestAnimationFrame(anime);
} |
modif pour prendre en considération la position initiale de l'image lors de l'animation
Merci NoSmoking, perso j'avais fait ça en plus en cas d'animation (si ça peut servir...)
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cancan{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="cancan" width="500" height="500"></canvas>
<script>
const cancan=document.getElementById('cancan');
const context= cancan.getContext("2d");
const cw=cancan.width;
const ch=cancan.height;
class Point{
constructor(x,y){
this.x=x;
this.y=y;
}
}
class Oimage{
constructor(x,y,ctx,path){
let pt= new Point(x,y);
const im=document.createElement('img');
im.src=path;
im.addEventListener('load',()=>{ctx.drawImage(im,pt.x,pt.y);});
this.draw=function(){
ctx.clearRect(0,0,cw,ch); //après il vaudrait mieux effacer sur le rect de la position précédente de l'image pour éviter que ça rame avec plusieurs objets en déplacement...
// et aussi utiliser les fonctionnalités de canvas avec ctx.save et ctx.restore() ainsi que ctx.translate(pt.x,pt.y) plutôt que de déplacer l'image...
ctx.drawImage(im,pt.x,pt.y);
};
Object.defineProperties(this, {pos: {
set: function (value) {
pt=new Point(x+value.x,y+value.y);//ici
this.draw();
}
}
});
}
}
const image=new Oimage(0,0,context,'image.png');
let dx=0;
function anime(){
dx+=1;
image.pos=new Point(dx,100);
requestAnimationFrame(anime);
}
anime();
</script>
</body>
</html> |
