動畫GIF在HTML5畫布

在HTML5中，我怎麼能畫容易（沒有太多複雜的代碼，請）在工作畫布GIF動畫（帶的drawImage僅第一幀在畫布所示）動畫GIF在HTML5畫布

來源

2010-06-17 julio

這可能是有用的：https://github.com/matt-way/gifuct-js – JoeRocc 2017-08-23 08:19:30

-8

帆布動畫不是HTML5規範的一部分。無論是恢復到GIF或考慮呈現SVG或回落到畫布/ VML基於JavaScript庫：http://raphaeljs.com/

來源

2010-06-17 21:30:55

我相信你正在尋找http://slbkbs.org/jsgif

遺憾的是，DOM不公開單獨的幀的GIF，所以這是通過下載GIF（使用XMLHttpRequest），解析它，然後在<canvas>上繪製它來完成的。

來源

2011-05-16 12:35:39 rodrigob

那麼，如果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() { // <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); 
}

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

來源

2012-04-16 19:11:25

這是慈祥的老人。我現在處理它的方式會有所不同。如果您不介意在您的代碼中添加新庫，請使用這些評論中提出的許多可用備選方案之一。考慮到ES6的出現，這將更好地重建爲具有更多功能的類。 :) – 2016-05-05 07:28:42

對於仍然有問題的人，或者不想動態加載其圖像或找出需要使用多少幀的人;

在HTML頁面上留下動畫GIF，設置爲在CSS中顯示：block，visibility：visible和position：relative。動態地將其置於畫布下方，並帶有負邊距頂部/ Z-索引（或您有什麼）。然後設置一個反覆調用drawImage的JavaScript定時器，以便根據需要快速刷新圖像。

如果圖像在DOM中不可見，則drawImage例程無法獲取動畫的後續幀。如果圖像完全位於畫布下，則渲染滯後。

來源

2014-10-03 18:34:01 Ayelis

你不能像這樣分層，除非你把多個畫布放在另一個之上 – trinalbadger587 2016-12-25 16:36:40

哦，它在2016年年底發生了變化嗎？因爲在2014年，我在Chrome和VTC1010上都做得很好。 – Ayelis 2017-03-24 18:12:10

那麼，正如其他人已經表示，你必須拆分幀動畫。我解決問題的方式更多的是個人偏好，但我在GIMP中打開GIF，並使用插件將所有作爲單獨圖層顯示的幀轉換爲精靈圖表。然後，我只需要在畫布上對精靈進行動畫處理，這很容易。

這裏是link該插件：d

來源

2016-11-14 14:42:42

動畫GIF在HTML5畫布

回答

相關問題