那么，如果gif文件的自動化畫布動畫不可用，您可以嘗試使用精靈表，但確實需要更多的代碼。

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() { //

...

var canvas = document.getElementById('canvasElement');

//

var context = canvas.getContext("2d");

setInterval((function (c, i) {

return function() {

draw_anim(c, 10, 10, i);

};

})(context, img_obj), 100);

}

這就是我如何解決這個問題。希望這有幫助。 (已測試)

總結

以上是生活随笔為你收集整理的html 5 gif手机版,动画GIF在HTML5画布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。