8 Replies - 894 Views - Last Post: 06 May 2013 - 03:01 AM

#1 BarryDM  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 30-April 11

Scrolling pictures

Posted 05 May 2013 - 01:57 PM

I am trying to get an Array of pictures to scroll across the screen. I have been able to get one picture to work but when I try to change to an Array I can never get anything to work. Any help would be appreciated. I can provide the whole web page if needed, I am using this in a <canvas> like this
<canvas id="canvas" width="1040" height="300"></canvas>  In the end I would like this to start with one picture and then once that one has moved start a new picture and so on and so on until all the pictures have been used then start at the beginning.



<script type="text/javascript">
var img = new Image();

img.src = 'Images/Juniors.jpg';
var CanvasXSize = 1040;
var CanvasYSize = 240;
var speed = 40; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset
//End User Variables
 
var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;
 
img.onload = function() {
    imgW = img.width*scale;
    imgH = img.height*scale;
    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
    if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
    else { clearX = CanvasXSize; }
    if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
    else { clearY = CanvasYSize; }

    ctx = document.getElementById('canvas').getContext('2d');  //Get Canvas Element
    
    return setInterval(draw, speed); //Set Refresh Rate
}
 
function draw() {
    //Clear Canvas
    ctx.clearRect(0,0,clearX,clearY);
 
    //If image is <= Canvas Size
    if (imgW <= CanvasXSize) {
        //reset, start from beginning
        if (x > (CanvasXSize)) { x = 0; }
        //draw aditional image
        if (x > (CanvasXSize-imgW)) {
          ctx.drawImage(img, x-CanvasXSize+1, y, imgW, imgH);
        }
    }
    //If image is > Canvas Size
    else {
      //reset, start from beginning
      if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
      //draw aditional image
      if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
    }
 
    //draw image
    ctx.drawImage(img,x,y,imgW,imgH);
    //amount to move
    x += dx;
}
</script>




Is This A Good Question/Topic? 0
  • +

Replies To: Scrolling pictures

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3808
  • View blog
  • Posts: 13,508
  • Joined: 12-December 12

Re: Scrolling pictures

Posted 05 May 2013 - 02:06 PM

Are there error messages in your browsers console?

I would set img.src after assigning img.onload = ... as it is possible for the image to load before the event is attached, in which case the event (probably) won't fire.

An event doesn't return anything, so you can delete the word return from the following line:

return setInterval(draw, speed); //Set Refresh Rate

Was This Post Helpful? 0
  • +
  • -

#3 BarryDM  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 30-April 11

Re: Scrolling pictures

Posted 05 May 2013 - 02:09 PM

I do not get any error messages and the code works how it is but instead of using just one image I would like to use multiple images and have them start as one has scrolled a little ways across the screen.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3808
  • View blog
  • Posts: 13,508
  • Joined: 12-December 12

Re: Scrolling pictures

Posted 05 May 2013 - 02:11 PM

img.width and height can include the pixels, "200px". Use parseFloat() or parseInt() to extract the numerical part.

View PostBarryDM, on 05 May 2013 - 09:09 PM, said:

I do not get any error messages and the code works how it is but instead of using just one image I would like to use multiple images and have them start as one has scrolled a little ways across the screen.

Ah, right. So first you might create an array of images, as you have stated. So what code have you tried to create your array?

This post has been edited by andrewsw: 05 May 2013 - 02:13 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3808
  • View blog
  • Posts: 13,508
  • Joined: 12-December 12

Re: Scrolling pictures

Posted 05 May 2013 - 02:24 PM

var myImages = [ "Juniors.jpg", "Seniors.jpg", "Elsewhere.jpg" ];

Was This Post Helpful? 0
  • +
  • -

#6 BarryDM  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 30-April 11

Re: Scrolling pictures

Posted 05 May 2013 - 02:30 PM

This is how I attempted to build the Array.

var img = new Image();

images=new Array();
 
 
images[0]=new Image;
images[0].src="Images/Juniors.jpg";
 
images[1]=new Image;
images[1].src="Images/minis.jpg";
 
images[2].src=new Image;
images[2].src="Images/seniors.jpg";
[code]
//User Variables
img.src = 'Images/Juniors.jpg';
var CanvasXSize = 1024;
var CanvasYSize = 240;
var speed = 40; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset
//End User Variables
 
var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;


Was This Post Helpful? 0
  • +
  • -

#7 BarryDM  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 30-April 11

Re: Scrolling pictures

Posted 05 May 2013 - 02:47 PM

I rewrote the array to look like this
var img = new Image[];

img[0] = new Image;
img[0].src = 'Images/Juniors.jpg';

img[1] = new Image;
img[1].src = 'Images/minis.jpg';

img[2] = new Image;
img[2].src = 'Images/senior.jpg';




Now I think that I need to write a loop like this but I don't know where to put it to make the program work how I want.

for(i = 0; i < img.length; i++){
    ctx.drawImage(img[i], x,y,imgW,imgH);
}


This post has been edited by BarryDM: 05 May 2013 - 02:48 PM

Was This Post Helpful? 0
  • +
  • -

#8 BarryDM  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 30-April 11

Re: Scrolling pictures

Posted 05 May 2013 - 04:41 PM

I went ahead and made a JSFiddle of this project that can be found at here I hope that this helps you to help me. Thank you for the help.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3808
  • View blog
  • Posts: 13,508
  • Joined: 12-December 12

Re: Scrolling pictures

Posted 06 May 2013 - 03:01 AM

var img = new Image[];


JS arrays do not have a type. To create a new array just requires:

var imgs = [];

// then:
imgs[0] = new Image();
imgs[0].src = 'Images/Juniors.jpg';

So, with a few adjustments, the code in your post #7 looks like it should work.

However, I recommend that you pause what you are doing and take the time to study JS arrays. Find a tutorial and work through it.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1