html 5 gif手机版,动画GIF在HTML5画布
那么,如果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画布的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html dom 高级,DOM 高级工程
- 下一篇: 计算机课有什么作业,计算机课作业~