Menu
In HTML5, how can I draw easily (no too much complex code please) an animated GIF in a canvas that works (with drawImage only first frame is shown in the canvas)
829
In Photoshop you can open the gif (turn on timeline window) and then "File > Export > Render Video" and select "Photoshop Image Sequence". Preload them all, add a counter and then just use drawImage to draw the correct image according to the counter. Show activity on this post.
Add Animated GIF to CanvasDrag and drop your animated gif onto the canvas. On the right, the properties panel will slide in, allowing you to add on-tap actions to your GIF and set other preferences, including scale, position, opacity level and more.
The only way to get a GIF animated in canvas is to decode the GIF image in javascript. Luckily the format is not too complicated with data arranged in blocks that contain image size, color pallets, timing information, a comment field, and how frames are drawn.
I believe you are looking for http://slbkbs.org/jsgif
Unfortunately, the DOM doesn't expose individual frames of a GIF, so this is done by downloading the GIF (with XMLHttpRequest), parsing it, and drawing it on a
<canvas>.
150
Well if automated canvas animation of gif files isn't available, you could try using sprite-sheets, but that indeed would require a bit more code.
var img_obj = { 'source': null, 'current': 0, 'total_frames': 16, 'width': 16, 'height': 16 }; var img = new Image(); img.onload = function () { // Triggered when image has finished loading. img_obj.source = img; // we set the image source for our object. } img.src = 'img/filename.png'; // contains an image of size 256x16 // with 16 frames of size 16x16 function draw_anim(context, x, y, iobj) { // context is the canvas 2d context. if (iobj.source != null) context.drawImage(iobj.source, iobj.current * iobj.width, 0, iobj.width, iobj.height, x, y, iobj.width, iobj.height); iobj.current = (iobj.current + 1) % iobj.total_frames; // incrementing the current frame and assuring animation loop } function on_body_load() { // <body onload='on_body_load()'>... var canvas = document.getElementById('canvasElement'); // <canvas id='canvasElement' width='320' height='200'/> var context = canvas.getContext("2d"); setInterval((function (c, i) { return function () { draw_anim(c, 10, 10, i); }; })(context, img_obj), 100); } This is how I'd tackle the problem. Hope this has been helpful. (tested)
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
