www.webdeveloper.com
Results 1 to 5 of 5

Thread: cant display anything

  1. #1
    Join Date
    Sep 2006
    Posts
    375

    cant display anything

    HI,
    In html5 canvas, I want to display an array of 4 related walking images one at a time to simulate movement. I can do this but not when I use classes as below. I get no error but no output? The code loops as required but I just cant display any array element.

    It is the ClassLoadImages.prototype.m_draw which is the issue.

    I have been to other forums but no one can solve this .

    Code:
       <canvas id="myCanvas" width="600" height="400"></canvas>
       <script>
      var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
       var j=0;
    	
    	var imgLoaded = 0;
    	var x=0,y=0;
    	var fi=0;
    	
    /////////////////////////////////////////////////////////////	
    function ClassLoadImages(startx,starty) {
     // var img1 = new Image();
     
      var arr1 = [];
      var images=[];
      var ii=0;
     // var imgElement=[];
      this.x=startx;
      this.y=starty;
      this.imgElement=[];
     
    
     	arr1[0] = "images/bcave1.png";
    	arr1[1] = "images/bcave2.png";
    	arr1[2] = "images/bcave3.png";
    	arr1[3] = "images/bcave4.png";
    
    	
    
      onImgLoad = function() {
      // alert(imgLoaded);
         imgLoaded++;
    	
         if(imgLoaded == 4) //all loaded
      	 {
      	
    		//alert(imgLoaded);
          gameLoop = setInterval(doGameLoop, 100);
    	//return ;	 
     	  }
       };//img1.onload
       
       
       for (i=0;i<arr1.length;i++){
    		
    		//alert(i);
    		images[i] = new Image();
     		images[i].onload = onImgLoad;
     		images[i].src = arr1[i];
    		this.imgElement[i] = images[i];
    		
    	}
    
    };//func ClassLoadImages
    
      
      ClassLoadImages.prototype.m_draw = function(fi){
       // this.x++;
       // this.y++;
       
       	ii++; 
    		//images[ii].x++;
        if (ii==4){
    		ii=0;
    	}
        ctx.drawImage(this.imgElement[fi],  30,   30);
         // ctx.fillText("finished loading " ,10,40);
      };
      
    ////////////////////////////////////////////////////////////////
    	
    	function doGameLoop() {
    		
            ctx.clearRect(0,0,600,400);
    		
    		if(fi==4) {fi=0;}
    		
    		img.m_draw(fi);
            fi++;
         }
    
    
    
    	var img= new ClassLoadImages(30,30);
    
        </script>

  2. #2
    Join Date
    Apr 2013
    Posts
    56
    Hello,

    It displays an error. It says that your variable ii is not initialized. Which makes sense since you declared it on ClassLoadImages() function. Try declaring it as global variable or in m_draw function.

  3. #3
    Join Date
    Sep 2006
    Posts
    375
    this works

    i am using dreamweaver and I get no error. What do you use to get errors as this would help me?

  4. #4
    Join Date
    Apr 2013
    Posts
    56
    You should check your browser for any errors. On Chrome you have developer tools, on firefox you have web console.

  5. #5
    Join Date
    Sep 2006
    Posts
    375
    ok excellent

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles