Trong HTML5, làm thế nào tôi có thể vẽ một cách dễ dàng (không quá nhiều mã phức tạp xin vui lòng) một GIF động trong một khung làm việc (với drawImage chỉ frame đầu tiên được thể hiện trong canvas)Animated GIF trong HTML5 canvas
Canvas animation không phải là một phần của thông số HTML5. Hoặc trở lại GIF hoặc xem xét một thư viện dựa trên JavaScript mà ám SVG hoặc rơi trở lại Canvas/VML: http://raphaeljs.com/
Tôi tin rằng bạn đang tìm kiếm http://slbkbs.org/jsgif
Thật không may, DOM không tiếp xúc với khung cá nhân của một GIF, do đó, điều này được thực hiện bằng cách tải xuống GIF (với XMLHttpRequest), phân tích cú pháp nó và vẽ nó trên
<canvas>.
Vâng nếu hoạt ảnh canvas tự động của tệp gif không khả dụng, bạn có thể thử sử dụng trang tính ma, nhưng điều đó thực sự sẽ yêu cầu mã nhiều hơn một chút.
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);
}
Đây là cách tôi giải quyết vấn đề. Hy vọng điều này đã được hữu ích. (thử nghiệm)
Đây là loại cũ. Cách tôi giải quyết nó bây giờ sẽ khác đi. Nếu bạn không nhớ thêm một thư viện mới vào mã của bạn, hãy sử dụng một trong nhiều lựa chọn thay thế có sẵn được đề xuất trong các nhận xét này. Có tính đến sự ra đời của ES6 này sẽ độc đáo hơn được xây dựng lại như một lớp học với nhiều chức năng hơn. :) –
Đối với bất kỳ ai vẫn gặp sự cố với điều này hoặc những người không muốn tải hình ảnh động hoặc tìm ra số lượng khung hình họ cần sử dụng;
Để GIF động trên trang HTML, đặt để hiển thị: chặn, hiển thị: hiển thị và vị trí: tương đối trong CSS. Tự động định vị nó dưới canvas với một margin-top/z-index âm (hoặc những gì có bạn). Sau đó, thiết lập một bộ đếm thời gian JavaScript gọi drawImage nhiều lần, nhanh như bạn cần để làm mới hình ảnh đúng cách.
Nếu hình ảnh không hiển thị trong DOM, thường trình drawImage không thể có được các khung hình động tiếp theo. Nếu hình ảnh được đặt hoàn toàn dưới khung vẽ, thì kết xuất sẽ bị trễ.
Bạn không thể phân lớp như thế này trừ khi bạn đặt nhiều canvas lên trên mỗi khác – trinalbadger587
Ồ, đã thay đổi vào cuối năm 2016 chưa? Bởi vì nó đã làm việc tốt khi tôi đã làm điều đó trong cả Chrome và trên VTC1010 trong năm 2014. – Ayelis
Vâng, như những người khác đã nói, bạn phải chia hoạt ảnh pe trong khung. Cách của tôi giải quyết vấn đề là nhiều hơn một sở thích cá nhân, nhưng tôi mở GIF trong GIMP và sử dụng một plugin tôi chuyển đổi tất cả các khung hình được hiển thị dưới dạng các lớp riêng lẻ thành một trang ma trận. Sau đó, tôi chỉ phải tạo hiệu ứng cho ảnh động trong khung vẽ dễ dàng hơn nhiều.
Đây là link cho plugin: D
Điều này có thể hữu ích: https://github.com/matt-way/gifuct-js – JoeRocc