erreur affichage images avec drawImage

**sabine_** · 20/12/2012, 16h03

Bonjour à tous,
je suis nouvelle sur ce forum et je débute en javascript.
Afin de m'exercer je voudrais faire défiler plusieurs images horizontalement à la suite avec canvas.
Pour ce faire j'ai deux fichiers, le premier index.html et le second game.js.

Je pense que les fonctions que j'ai créées fonctionnent excepté la méthode draw où l'image ne s'affiche pas avec la fonction drawImage.

Merci de m'éclairer si possible

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
	<head>
		<title>Butterfly</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/game.js"></script>
	</head>
	<body>
		<canvas id="canvas" width="800px" height="600px"></canvas>
 
	</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var butterflyArray = [];
 var ctx;
 
 
window.addEventListener('load', function () {
 
ctx = document.getElementById("canvas"); 
 
  var line1 = new line({nb:1, 
                              posX : 30,
			      posY: 30,  
                              direction : -1, 
                              minspace : 32, 
                              maxspace : 96, 
                              speed : 2});
 
  for(var i=0;i<7;i++)
  {
    var butterfly = new animal(line1, 64);
    butterflyArray.push(butterfly);
    ctx.appendChild(butterfly.image);
 
  }
 
 
}, false);
 
function line(elements)
{
  this.nb = elements.nb;
  this.direction = elements.direction;
  this.minspace = elements.minspace;
  this.maxspace = elements.maxspace;
  this.speed = elements.speed;
  this.posX = elements.posX;
  this.posY = elements.posY;
  this.lastanimal;
 
  this.getNextPosX = function(animal)
  {
    var space = Math.floor(Math.random()*(this.maxspace-this.minspace)) + this.minspace;
    var lastPosX = 0;
    if (this.lastanimal)
    {
      lastPosX = this.direction == -1? this.lastanimal.posX + this.lastanimal.width + space : this.lastanimal.posX - space - animal.width;
    }
    else
    {
      lastPosX = this.posX;
    }
    this.lastanimal = animal;
 
    return lastPosX;
  }
}
 
function animal(myLine, width)
{
 
  this.width = width;
  this.myLine = myLine; 
  this.posY = this.myLine.posY;
  this.posX = this.myLine.getNextPosX(this);
 
 
  this.move = function()
  {
    this.posX = this.myLine.direction == 1? this.posX + this.myLine.speed : this.posX -  this.myLine.speed;
    if ((this.myLine.direction == 1 && this.posX >= 800) || (this.myLine.direction == -1 && this.posX < (-this.width)))
    {
      this.posX = this.myLine.getNextPosX(this);
    }
  }
  this.draw = function()
  {
	this.image = new Image()		
	this.image.src = 'images/butterfly.png';
   ctx.drawImage(this.image, this.posX, this.posY);
  }
}   
 
 
setInterval(function(){for (var e=0; e < butterflyArray.length;e++){butterflyArray[e].move(); butterflyArray[e].draw();}}, 80);

**Shaan1974** · 20/12/2012, 16h21

Salut,

Il est toujours fastidieux de toujours faire tout soi-même, c'est cependant valorisant, mais pour gérer les "canvas" il y a une library qui gère cela tout à fait très bien elle s'appelle "JCanvaScript" tu peux trouver tout cela sur l'adresse :

http://jcscript.com/

Amicalement
Shaan

**sabine_** · 20/12/2012, 16h26

Merci de ta réponse rapide Shaan1974, mais je voudrais ne pas utiliser de librairies pour ce projet.

Si quelqu'un pouvait m'aider à trouver et comprendre mes erreurs.
Merci d'avance.

**p3ga5e** · 20/12/2012, 16h48

Salut !

Lorsque tu renseigne l’URL de ton image dans la propriété src, cela déclenche un chargement asynchrone.
Tu dois, donc, attendre le chargement complet par l'évènement onload avant d’appeler la méthode drawImage.
De plus, tu devrais, conceptuellement, séparer, le chargement de tes ressources de tes méthodes de rendus ... ne pas recharger ton image a chaque appelle de ta methode draw de ton objet animal

**sabine_** · 20/12/2012, 17h02

Merci p3ga5e pour ta réponse, j'ai effectuée les modifications que tu m'as conseillée, malheureusement j'ai toujours le même problème et mes images ne s'affichent pas.

**p3ga5e** · 20/12/2012, 17h21

Difficile de t’aider si tu ne post pas tes modifs

erreur affichage images avec drawImage [API HTML5]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager