当前位置：文江博客话题详情

HTML5 画布中的动画 GIF

发布于 2024-09-05 21:40:55 字数 70 浏览 2 评论 0原文

在 HTML5 中，如何在画布中轻松绘制（请不要太多复杂的代码）动画 GIF（使用 drawImage 仅在画布中显示第一帧）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小姐丶请自重 2024-09-12 21:40:55

如果 gif 文件的自动画布动画不可用，您可以尝试使用 sprite-sheets，但这确实需要更多代码。

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);
}

这就是我解决问题的方法。希望这对您有所帮助。（已测试）

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)

回复收藏 0 原文

怪我闹别瞎闹 2024-09-12 21:40:55

我相信您正在寻找 http://slbkbs.org/jsgif

不幸的是，DOM 不公开 GIF 的各个帧，因此这是通过下载 GIF（使用 XMLHttpRequest）、解析它并在上绘制它来完成的。

回复收藏 0 原文

风柔一江水 2024-09-12 21:40:55

对于仍然遇到此问题的人，或者那些不想动态加载图像或弄清楚需要使用多少帧的人；

将动画 GIF 保留在 HTML 页面上，在 CSS 中设置为 display:block、visibility:visible 和position:relative。使用负的 margin-top/z-index （或者你有的）动态地将它定位在画布下。然后设置一个 JavaScript 计时器，根据您需要的速度重复调用drawImage，以便正确刷新图像。

如果图像在 DOM 中不可见，则 drawImage 例程无法获取动画的后续帧。如果图像绝对位于画布下方，则渲染会滞后。

回复收藏 0 原文