javascript - HTML5 Canvas animation not showing up -
i've been knocking head against keyboard trying figure out why animation this tutorial not showing on canvas correctly, if @ all. in chrome draws leftmost part of image on canvas, in safari draws nothing @ all.
i've tried different methods of delaying until image loads, putting script tag in various places in html, no luck. debugging in chrome shows no errors.
the source code animation not quite same presents in tutorial, i've tried make sense of it. i've been @ 2 days , you'll pinpoint 30 seconds, want see damn coin spin.
spritesheet.jpg:
animation.html:
<!doctype html> <html> <head> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=ubuntu' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test profile page</title> </head> <body> <header> <h1>hello</h1> </header> <nav> <ul> <li><a href="index.html">pictures</a></li> <li><a href="animation.html">animation?</a></li> <li><a href="cartoon.html">cartoon</a></li> </ul> </nav> <section> <img src="spritesheet.jpg" /> <canvas id="coinanimation"></canvas> </section> <footer> </footer> <script src="animation.js"></script> </body> </html> animation.js:
window.onload = function () { var spritesheet = new image(); spritesheet.src = "spritesheet.jpg"; //define sprite class function sprite (options) { var = {}, frameindex = 0, tickcount = 0, ticksperframe = options.ticksperframe || 0, numberofframes = options.numberofframes || 1; that.context = options.context; that.width = options.width; that.height = options.height; that.image = options.image; that.loop = options.loop; that.update = function () { tickcount += 1; if (tickcount > ticksperframe) { tickcount = 0; // if current frame index in range if (frameindex < numberofframes - 1) { // go next frame frameindex += 1; } else if (that.loop) { frameindex = 0; } } }; that.render = function () { // clear canvas that.context.clearrect(0, 0, that.width, that.height); // draw animation that.context.drawimage( that.image, frameindex * that.width / numberofframes, 0, that.width / numberofframes, that.height, 0, 0, that.width / numberofframes, that.height); }; return that; } var canvas = document.getelementbyid("coinanimation"); canvas.width = 100; canvas.height = 100; var coin = new sprite({ context: canvas.getcontext("2d"), width: 100, height: 100, image: spritesheet }); function gameloop () { window.requestanimationframe(gameloop); coin.update(); coin.render(); } spritesheet.addeventlistener("load", gameloop); }
when enter width on coin need enter width of entire image (which seems 440), not width of single frame. along need set numberofframes 10:
var coin = new sprite({ context: canvas.getcontext("2d"), width: 440, height: 100, image: spritesheet, numberofframes: 10 }); note when find width of single frame width/numberofframes find that, why not work if enter 100. coin should spinning.
if want slow coin down can add ticksperframe: 5 example, higher slower go.
Comments
Post a Comment