Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do I convert this to HTML5 with canvas?

    Hi there!
    I found this code, in reply to someone's problem, on this forum.
    I have altered it to my own needs, as it's an excellent piece of code.
    However, I would like it to run under HTML5. I believe I need to add
    "canvas" code to do the same??
    I have already changed the doctype! HTML heading etc.,
    Can anyone help?
    Many, many thanks!!

    Code:
    <!doctype html>
    <head>
    <meta charset=UTF-8" />
    <title>Crazy Rally - France</title>
    <script type="text/javascript">
    var frames = new Array();
    	
    //load frames into array
    for(var i = 1; i < 417; i++){
    	frames[i] = new Image(480,320);
    	frames[i].src = "track" + i + ".png";
    }
    
    //playback
    var currentFrameNumber = 1;
    var fps = 30; // frames / second
    const speed = 1000 / fps; // milliseconds
    //var speed = 33;
          
    function nextFrame( )
    {
          	document.getElementById("display").src = frames[currentFrameNumber].src;
    	currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
           	setTimeout( nextFrame, speed );
    }
    window.onload = nextFrame;
    </script>
    </head>
    <body>
    <img id="display" src="track1.png" width="480" height="320">
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    No need for canvas here, your code is perfectly HTML5 compliant already ... except for

    - the missing " beginning quote character in line 3
    - the missing alt attribute for the img element

    See W3C Validator for further questions regarding (X)HTML compliance

  • Users who have thanked devnull69 for this post:

    dave204 (03-02-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the info!
    I've made the changes, but although I've loaded up 10 images in my image folder, I can't get the site to fire up in my Safari browser in the iPhone.
    I've saved this file as the index.html just the same as for previous web apps I've tried out, and the images aren't big - only 40kbs each.
    Any ideas where I've gone wrong? And, yes, the images folder is a direct sub-folder on my web-hosting!!
    Are you sure this will work as a HTML5 web app file?
    Thanks again! ps runs OK in my Firefox browser..


  •  

    Posting Permissions

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