javascript 如何使用 Canvas 放置 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48234696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a gif with Canvas
提问by Grandtour
I'm creating a game, and in my game, when the HERO stay near the MONSTER, a gif will be showed, to scare the player. But I have no idea how to do this. I tried to put PHP or HTML code, but it doesn't works... The function is AtualizaTela2(). This is my main code:
我正在创建一个游戏，在我的游戏中，当 HERO 靠近 MONSTER 时，会显示一个 gif，以吓唬玩家。但我不知道如何做到这一点。我试图把 PHP 或 HTML 代码，但它不起作用......功能是AtualizaTela2(). 这是我的主要代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Hero's Escape Game</title>
<script language="JavaScript" type="text/javascript">
var objCanvas=null; // object that represents the canvas
var objContexto=null;
// Hero positioning control
var xHero=300;
var yHero=100;
// Monster positioning control
var xMonster=620;
var yMonster=0;
var imgFundo2 = new Image();
imgFundo2.src = "Images/Pista2.png";
var imgMonster = new Image();
imgMonster.src = "Images/Monster.png";
var imgHero = new Image();
imgHero.src = "Images/Hero.png";
function AtualizaTela2(){
if((xHero >= xMonster-10)&&(xHero <= xMonster + 10))
{
/*gif here*/
}
objContexto.drawImage(imgFundo2,0,0);
objContexto.drawImage(imgHero, xHero, yHero);
objContexto.drawImage(imgMonster, xMonster, yMonster);
function Iniciar(){
objCanvas = document.getElementById("meuCanvas");
objContexto = objCanvas.getContext("2d");
AtualizaTela2();
}
/* the function HeroMovement() and MonsterMovement() are not here */
}
</script>
</head>
<body onLoad="Iniciar();" onkeydown="HeroMovement(event);">
<canvas id="meuCanvas" width="1233"
height="507"
style="border:1px solid #000000;">
Seu browser n?o suporta o elemento CANVAS, atualize-se!!!
</canvas><BR>
</body>
</html>
This is the simplified code, because the real code is very big!
这是简化的代码，因为真正的代码很大！
Thanks for the help! :)
谢谢您的帮助！:)
回答by Blindman67
Loading and playing GIF image to canvas.
加载和播放 GIF 图像到画布。
Sorry answer exceeded size limit, had to remove much of the detailed code comments.
抱歉回答超出了大小限制，不得不删除很多详细的代码注释。
I am not going to go into details as the whole process is rather complicated.
整个过程比较复杂，我就不细说了。
The only way to get a GIF animated in canvas is to decode the GIF image in javascript. Luckily the format is not too complicated with data arranged in blocks that contain image size, color pallets, timing information, a comment field, and how frames are drawn.
在画布中获得 GIF 动画的唯一方法是在 javascript 中解码 GIF 图像。幸运的是，格式并不太复杂，数据以块的形式排列，包含图像大小、调色板、时间信息、注释字段以及帧的绘制方式。
Custom GIF load and player.
自定义 GIF 加载和播放器。
The example below contains an object called GIFthat will create custom format GIF images from URLs that can play a GIF similar to how a video is played. You can also randomly access all GIF frames in any order.
下面的示例包含一个名为的对象GIF，该对象将从可以播放类似于视频播放方式的 GIF 的 URL 创建自定义格式的 GIF 图像。您还可以按任意顺序随机访问所有 GIF 帧。
There are many callbacks and options. There is basic usage information in comments and the code shows how to load the gif. There are functions to pauseand play, seek(timeInSeconds)and seekFrame(frameNumber), properties to control playSpeedand much more. There are no shuttling events as access is immediate.
有很多回调和选项。注释中有基本的使用信息，代码显示了如何加载 gif。有函数pause和play，seek(timeInSeconds)和seekFrame(frameNumber)，要控制的属性playSpeed等等。没有穿梭事件，因为访问是立即的。
var myGif = GIF();
myGif.load("GIFurl.gif");
Once loaded
一旦加载
ctx.drawImage(myGif.image,0,0); // will draw the playing gif image
Or access the frames via the framesbuffer
或通过frames缓冲区访问帧
ctx.drawImage(myGif.frames[0].image,0,0); // draw frame 0 only.
Go to the bottom of the GIF object to see all the options with comments.
转到 GIF 对象的底部以查看所有带有注释的选项。
The GIF must be same domain or have CORS header
GIF 必须是相同的域或具有 CORS 标头
The gif in he demo is from wiki commonsand contains 250+ frames, some low end devices will have trouble with this as each frame is converted to a full RGBA image making the loaded GIF significantly larger than the gif file size.
演示中的 gif 来自wiki commons，包含 250 多个帧，一些低端设备会遇到问题，因为每一帧都被转换为完整的 RGBA 图像，这使得加载的 GIF 显着大于 gif 文件的大小。
The demo
演示
Loads the gif displaying the frames and frame count as loaded. When loaded 100 particles each with random access frames playing at independent speeds and independent directions are displayed in the background.
加载 gif，显示已加载的帧数和帧数。当加载 100 个粒子时，每个粒子都以独立速度和独立方向播放的随机访问帧显示在背景中。
The foreground image is the gif playing at the frame rate embedded in the file.
前景图像是以文件中嵌入的帧速率播放的 gif。
Code is as is, as an example only and NOTfor commercial use.
代码原样，仅作为示例，不得用于商业用途。
const ctx = canvas.getContext("2d");
var myGif;
// Can not load gif cross domain unless it has CORS header
const gifURL = "https://upload.wikimedia.org/wikipedia/commons/a/a2/Wax_fire.gif";
// timeout just waits till script has been parsed and executed
// then starts loading a gif
setTimeout(()=>{
myGif = GIF(); // creates a new gif
myGif.onerror = function(e){
console.log("Gif loading error " + e.type);
}
myGif.load(gifURL);
},0);
// Function draws an image
function drawImage(image,x,y,scale,rot){
ctx.setTransform(scale,0,0,scale,x,y);
ctx.rotate(rot);
ctx.drawImage(image,-image.width / 2, -image.height / 2);
}
// helper functions
const rand = (min = 1, max = min + (min = 0)) => Math.random() * (max - min) + min;
const setOf =(c,C)=>{var a=[],i=0;while(i<c){a.push(C(i++))}return a};
const eachOf =(a,C)=>{var i=0;const l=a.length;while(i<l && C(a[i],i++,l)!==true);return i};
const mod = (v,m) => ((v % m) + m) % m;
// create 100 particles
const particles = setOf(100,() => {
return {
x : rand(innerWidth),
y : rand(innerHeight),
scale : rand(0.15, 0.5),
rot : rand(Math.PI * 2),
frame : 0,
frameRate : rand(-2,2),
dr : rand(-0.1,0.1),
dx : rand(-4,4),
dy : rand(-4,4),
};
});
// Animate and draw 100 particles
function drawParticles(){
eachOf(particles, part => {
part.x += part.dx;
part.y += part.dy;
part.rot += part.dr;
part.frame += part.frameRate;
part.x = mod(part.x,innerWidth);
part.y = mod(part.y,innerHeight);
var frame = mod(part.frame ,myGif.frames.length) | 0;
drawImage(myGif.frames[frame].image,part.x,part.y,part.scale,part.rot);
});
}
var w = canvas.width;
var h = canvas.height;
var cw = w / 2; // center
var ch = h / 2;
// main update function
function update(timer) {
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
if (w !== innerWidth || h !== innerHeight) {
cw = (w = canvas.width = innerWidth) / 2;
ch = (h = canvas.height = innerHeight) / 2;
} else {
ctx.clearRect(0, 0, w, h);
}
if(myGif) { // If gif object defined
if(!myGif.loading){ // if loaded
// draw random access to gif frames
drawParticles();
drawImage(myGif.image,cw,ch,1,0); // displays the current frame.
}else if(myGif.lastFrame !== null){ // Shows frames as they load
ctx.drawImage(myGif.lastFrame.image,0,0);
ctx.fillStyle = "white";
ctx.fillText("GIF loading frame " + myGif.frames.length ,10,21);
ctx.fillText("GIF loading frame " + myGif.frames.length,10,19);
ctx.fillText("GIF loading frame " + myGif.frames.length,9,20);
ctx.fillText("GIF loading frame " + myGif.frames.length,11,20);
ctx.fillStyle = "black";
ctx.fillText("GIF loading frame " + myGif.frames.length,10,20);
}
}else{
ctx.fillText("Waiting for GIF image ",10,20);
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
/*============================================================================
Gif Decoder and player for use with Canvas API's
**NOT** for commercial use.
To use
var myGif = GIF(); // creates a new gif
var myGif = new GIF(); // will work as well but not needed as GIF() returns the correct reference already.
myGif.load("myGif.gif"); // set URL and load
myGif.onload = function(event){ // fires when loading is complete
//event.type = "load"
//event.path array containing a reference to the gif
}
myGif.onprogress = function(event){ // Note this function is not bound to myGif
//event.bytesRead bytes decoded
//event.totalBytes total bytes
//event.frame index of last frame decoded
}
myGif.onerror = function(event){ // fires if there is a problem loading. this = myGif
//event.type a description of the error
//event.path array containing a reference to the gif
}
Once loaded the gif can be displayed
if(!myGif.loading){
ctx.drawImage(myGif.image,0,0);
}
You can display the last frame loaded during loading
if(myGif.lastFrame !== null){
ctx.drawImage(myGif.lastFrame.image,0,0);
}
To access all the frames
var gifFrames = myGif.frames; // an array of frames.
A frame holds various frame associated items.
myGif.frame[0].image; // the first frames image
myGif.frame[0].delay; // time in milliseconds frame is displayed for
Gifs use various methods to reduce the file size. The loaded frames do not maintain the optimisations and hold the full resolution frames as DOM images. This mean the memory footprint of a decode gif will be many time larger than the Gif file.
*/
const GIF = function () {
// **NOT** for commercial use.
var timerID; // timer handle for set time out usage
var st; // holds the stream object when loading.
var interlaceOffsets = [0, 4, 2, 1]; // used in de-interlacing.
var interlaceSteps = [8, 8, 4, 2];
var interlacedBufSize; // this holds a buffer to de interlace. Created on the first frame and when size changed
var deinterlaceBuf;
var pixelBufSize; // this holds a buffer for pixels. Created on the first frame and when size changed
var pixelBuf;
const GIF_FILE = { // gif file data headers
GCExt : 0xF9,
COMMENT : 0xFE,
APPExt : 0xFF,
UNKNOWN : 0x01, // not sure what this is but need to skip it in parser
IMAGE : 0x2C,
EOF : 59, // This is entered as decimal
EXT : 0x21,
};
// simple buffered stream used to read from the file
var Stream = function (data) {
this.data = new Uint8ClampedArray(data);
this.pos = 0;
var len = this.data.length;
this.getString = function (count) { // returns a string from current pos of len count
var s = "";
while (count--) { s += String.fromCharCode(this.data[this.pos++]) }
return s;
};
this.readSubBlocks = function () { // reads a set of blocks as a string
var size, count, data = "";
do {
count = size = this.data[this.pos++];
while (count--) { data += String.fromCharCode(this.data[this.pos++]) }
} while (size !== 0 && this.pos < len);
return data;
}
this.readSubBlocksB = function () { // reads a set of blocks as binary
var size, count, data = [];
do {
count = size = this.data[this.pos++];
while (count--) { data.push(this.data[this.pos++]);}
} while (size !== 0 && this.pos < len);
return data;
}
};
// LZW decoder uncompressed each frames pixels
// this needs to be optimised.
// minSize is the min dictionary as powers of two
// size and data is the compressed pixels
function lzwDecode(minSize, data) {
var i, pixelPos, pos, clear, eod, size, done, dic, code, last, d, len;
pos = pixelPos = 0;
dic = [];
clear = 1 << minSize;
eod = clear + 1;
size = minSize + 1;
done = false;
while (!done) { // JavaScript optimisers like a clear exit though I never use 'done' apart from fooling the optimiser
last = code;
code = 0;
for (i = 0; i < size; i++) {
if (data[pos >> 3] & (1 << (pos & 7))) { code |= 1 << i }
pos++;
}
if (code === clear) { // clear and reset the dictionary
dic = [];
size = minSize + 1;
for (i = 0; i < clear; i++) { dic[i] = [i] }
dic[clear] = [];
dic[eod] = null;
} else {
if (code === eod) { done = true; return }
if (code >= dic.length) { dic.push(dic[last].concat(dic[last][0])) }
else if (last !== clear) { dic.push(dic[last].concat(dic[code][0])) }
d = dic[code];
len = d.length;
for (i = 0; i < len; i++) { pixelBuf[pixelPos++] = d[i] }
if (dic.length === (1 << size) && size < 12) { size++ }
}
}
};
function parseColourTable(count) { // get a colour table of length count Each entry is 3 bytes, for RGB.
var colours = [];
for (var i = 0; i < count; i++) { colours.push([st.data[st.pos++], st.data[st.pos++], st.data[st.pos++]]) }
return colours;
}
function parse (){ // read the header. This is the starting point of the decode and async calls parseBlock
var bitField;
st.pos += 6;
gif.width = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
gif.height = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
bitField = st.data[st.pos++];
gif.colorRes = (bitField & 0b1110000) >> 4;
gif.globalColourCount = 1 << ((bitField & 0b111) + 1);
gif.bgColourIndex = st.data[st.pos++];
st.pos++; // ignoring pixel aspect ratio. if not 0, aspectRatio = (pixelAspectRatio + 15) / 64
if (bitField & 0b10000000) { gif.globalColourTable = parseColourTable(gif.globalColourCount) } // global colour flag
setTimeout(parseBlock, 0);
}
function parseAppExt() { // get application specific data. Netscape added iterations and terminator. Ignoring that
st.pos += 1;
if ('NETSCAPE' === st.getString(8)) { st.pos += 8 } // ignoring this data. iterations (word) and terminator (byte)
else {
st.pos += 3; // 3 bytes of string usually "2.0" when identifier is NETSCAPE
st.readSubBlocks(); // unknown app extension
}
};
function parseGCExt() { // get GC data
var bitField;
st.pos++;
bitField = st.data[st.pos++];
gif.disposalMethod = (bitField & 0b11100) >> 2;
gif.transparencyGiven = bitField & 0b1 ? true : false; // ignoring bit two that is marked as userInput???
gif.delayTime = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
gif.transparencyIndex = st.data[st.pos++];
st.pos++;
};
function parseImg() { // decodes image data to create the indexed pixel image
var deinterlace, frame, bitField;
deinterlace = function (width) { // de interlace pixel data if needed
var lines, fromLine, pass, toline;
lines = pixelBufSize / width;
fromLine = 0;
if (interlacedBufSize !== pixelBufSize) { // create the buffer if size changed or undefined.
deinterlaceBuf = new Uint8Array(pixelBufSize);
interlacedBufSize = pixelBufSize;
}
for (pass = 0; pass < 4; pass++) {
for (toLine = interlaceOffsets[pass]; toLine < lines; toLine += interlaceSteps[pass]) {
deinterlaceBuf.set(pixelBuf.subArray(fromLine, fromLine + width), toLine * width);
fromLine += width;
}
}
};
frame = {}
gif.frames.push(frame);
frame.disposalMethod = gif.disposalMethod;
frame.time = gif.length;
frame.delay = gif.delayTime * 10;
gif.length += frame.delay;
if (gif.transparencyGiven) { frame.transparencyIndex = gif.transparencyIndex }
else { frame.transparencyIndex = undefined }
frame.leftPos = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
frame.topPos = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
frame.width = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
frame.height = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
bitField = st.data[st.pos++];
frame.localColourTableFlag = bitField & 0b10000000 ? true : false;
if (frame.localColourTableFlag) { frame.localColourTable = parseColourTable(1 << ((bitField & 0b111) + 1)) }
if (pixelBufSize !== frame.width * frame.height) { // create a pixel buffer if not yet created or if current frame size is different from previous
pixelBuf = new Uint8Array(frame.width * frame.height);
pixelBufSize = frame.width * frame.height;
}
lzwDecode(st.data[st.pos++], st.readSubBlocksB()); // decode the pixels
if (bitField & 0b1000000) { // de interlace if needed
frame.interlaced = true;
deinterlace(frame.width);
} else { frame.interlaced = false }
processFrame(frame); // convert to canvas image
};
function processFrame(frame) { // creates a RGBA canvas image from the indexed pixel data.
var ct, cData, dat, pixCount, ind, useT, i, pixel, pDat, col, frame, ti;
frame.image = document.createElement('canvas');
frame.image.width = gif.width;
frame.image.height = gif.height;
frame.image.ctx = frame.image.getContext("2d");
ct = frame.localColourTableFlag ? frame.localColourTable : gif.globalColourTable;
if (gif.lastFrame === null) { gif.lastFrame = frame }
useT = (gif.lastFrame.disposalMethod === 2 || gif.lastFrame.disposalMethod === 3) ? true : false;
if (!useT) { frame.image.ctx.drawImage(gif.lastFrame.image, 0, 0, gif.width, gif.height) }
cData = frame.image.ctx.getImageData(frame.leftPos, frame.topPos, frame.width, frame.height);
ti = frame.transparencyIndex;
dat = cData.data;
if (frame.interlaced) { pDat = deinterlaceBuf }
else { pDat = pixelBuf }
pixCount = pDat.length;
ind = 0;
for (i = 0; i < pixCount; i++) {
pixel = pDat[i];
col = ct[pixel];
if (ti !== pixel) {
dat[ind++] = col[0];
dat[ind++] = col[1];
dat[ind++] = col[2];
dat[ind++] = 255; // Opaque.
} else
if (useT) {
dat[ind + 3] = 0; // Transparent.
ind += 4;
} else { ind += 4 }
}
frame.image.ctx.putImageData(cData, frame.leftPos, frame.topPos);
gif.lastFrame = frame;
if (!gif.waitTillDone && typeof gif.onload === "function") { doOnloadEvent() }// if !waitTillDone the call onload now after first frame is loaded
};
// **NOT** for commercial use.
function finnished() { // called when the load has completed
gif.loading = false;
gif.frameCount = gif.frames.length;
gif.lastFrame = null;
st = undefined;
gif.complete = true;
gif.disposalMethod = undefined;
gif.transparencyGiven = undefined;
gif.delayTime = undefined;
gif.transparencyIndex = undefined;
gif.waitTillDone = undefined;
pixelBuf = undefined; // dereference pixel buffer
deinterlaceBuf = undefined; // dereference interlace buff (may or may not be used);
pixelBufSize = undefined;
deinterlaceBuf = undefined;
gif.currentFrame = 0;
if (gif.frames.length > 0) { gif.image = gif.frames[0].image }
doOnloadEvent();
if (typeof gif.onloadall === "function") {
(gif.onloadall.bind(gif))({ type : 'loadall', path : [gif] });
}
if (gif.playOnLoad) { gif.play() }
}
function canceled () { // called if the load has been cancelled
finnished();
if (typeof gif.cancelCallback === "function") { (gif.cancelCallback.bind(gif))({ type : 'canceled', path : [gif] }) }
}
function parseExt() { // parse extended blocks
const blockID = st.data[st.pos++];
if(blockID === GIF_FILE.GCExt) { parseGCExt() }
else if(blockID === GIF_FILE.COMMENT) { gif.comment += st.readSubBlocks() }
else if(blockID === GIF_FILE.APPExt) { parseAppExt() }
else {
if(blockID === GIF_FILE.UNKNOWN) { st.pos += 13; } // skip unknow block
st.readSubBlocks();
}
}
function parseBlock() { // parsing the blocks
if (gif.cancel !== undefined && gif.cancel === true) { canceled(); return }
const blockId = st.data[st.pos++];
if(blockId === GIF_FILE.IMAGE ){ // image block
parseImg();
if (gif.firstFrameOnly) { finnished(); return }
}else if(blockId === GIF_FILE.EOF) { finnished(); return }
else { parseExt() }
if (typeof gif.onprogress === "function") {
gif.onprogress({ bytesRead : st.pos, totalBytes : st.data.length, frame : gif.frames.length });
}
setTimeout(parseBlock, 0); // parsing frame async so processes can get some time in.
};
function cancelLoad(callback) { // cancels the loading. This will cancel the load before the next frame is decoded
if (gif.complete) { return false }
gif.cancelCallback = callback;
gif.cancel = true;
return true;
}
function error(type) {
if (typeof gif.onerror === "function") { (gif.onerror.bind(this))({ type : type, path : [this] }) }
gif.onload = gif.onerror = undefined;
gif.loading = false;
}
function doOnloadEvent() { // fire onload event if set
gif.currentFrame = 0;
gif.nextFrameAt = gif.lastFrameAt = new Date().valueOf(); // just sets the time now
if (typeof gif.onload === "function") { (gif.onload.bind(gif))({ type : 'load', path : [gif] }) }
gif.onerror = gif.onload = undefined;
}
function dataLoaded(data) { // Data loaded create stream and parse
st = new Stream(data);
parse();
}
function loadGif(filename) { // starts the load
var ajax = new XMLHttpRequest();
ajax.responseType = "arraybuffer";
ajax.onload = function (e) {
if (e.target.status === 404) { error("File not found") }
else if(e.target.status >= 200 && e.target.status < 300 ) { dataLoaded(ajax.response) }
else { error("Loading error : " + e.target.status) }
};
ajax.open('GET', filename, true);
ajax.send();
ajax.onerror = function (e) { error("File error") };
this.src = filename;
this.loading = true;
}
function play() { // starts play if paused
if (!gif.playing) {
gif.paused = false;
gif.playing = true;
playing();
}
}
function pause() { // stops play
gif.paused = true;
gif.playing = false;
clearTimeout(timerID);
}
function togglePlay(){
if(gif.paused || !gif.playing){ gif.play() }
else{ gif.pause() }
}
function seekFrame(frame) { // seeks to frame number.
clearTimeout(timerID);
gif.currentFrame = frame % gif.frames.length;
if (gif.playing) { playing() }
else { gif.image = gif.frames[gif.currentFrame].image }
}
function seek(time) { // time in Seconds // seek to frame that would be displayed at time
clearTimeout(timerID);
if (time < 0) { time = 0 }
time *= 1000; // in ms
time %= gif.length;
var frame = 0;
while (time > gif.frames[frame].time + gif.frames[frame].delay && frame < gif.frames.length) { frame += 1 }
gif.currentFrame = frame;
if (gif.playing) { playing() }
else { gif.image = gif.frames[gif.currentFrame].image}
}
function playing() {
var delay;
var frame;
if (gif.playSpeed === 0) {
gif.pause();
return;
} else {
if (gif.playSpeed < 0) {
gif.currentFrame -= 1;
if (gif.currentFrame < 0) {gif.currentFrame = gif.frames.length - 1 }
frame = gif.currentFrame;
frame -= 1;
if (frame < 0) { frame = gif.frames.length - 1 }
delay = -gif.frames[frame].delay * 1 / gif.playSpeed;
} else {
gif.currentFrame += 1;
gif.currentFrame %= gif.frames.length;
delay = gif.frames[gif.currentFrame].delay * 1 / gif.playSpeed;
}
gif.image = gif.frames[gif.currentFrame].image;
timerID = setTimeout(playing, delay);
}
}
var gif = { // the gif image object
onload : null, // fire on load. Use waitTillDone = true to have load fire at end or false to fire on first frame
onerror : null, // fires on error
onprogress : null, // fires a load progress event
onloadall : null, // event fires when all frames have loaded and gif is ready
paused : false, // true if paused
playing : false, // true if playing
waitTillDone : true, // If true onload will fire when all frames loaded, if false, onload will fire when first frame has loaded
loading : false, // true if still loading
firstFrameOnly : false, // if true only load the first frame
width : null, // width in pixels
height : null, // height in pixels
frames : [], // array of frames
comment : "", // comments if found in file. Note I remember that some gifs have comments per frame if so this will be all comment concatenated
length : 0, // gif length in ms (1/1000 second)
currentFrame : 0, // current frame.
frameCount : 0, // number of frames
playSpeed : 1, // play speed 1 normal, 2 twice 0.5 half, -1 reverse etc...
lastFrame : null, // temp hold last frame loaded so you can display the gif as it loads
image : null, // the current image at the currentFrame
playOnLoad : true, // if true starts playback when loaded
// functions
load : loadGif, // call this to load a file
cancel : cancelLoad, // call to stop loading
play : play, // call to start play
pause : pause, // call to pause
seek : seek, // call to seek to time
seekFrame : seekFrame, // call to seek to frame
togglePlay : togglePlay, // call to toggle play and pause state
};
return gif;
}
/*=========================================================================
End of gif reader
*/
const mouse = {
bounds: null,
x: 0,
y: 0,
button: false
};
function mouseEvents(e) {
const m = mouse;
m.bounds = canvas.getBoundingClientRect();
m.x = e.pageX - m.bounds.left - scrollX;
m.y = e.pageY - m.bounds.top - scrollY;
mouse.x = e.pageX;
m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : m.button;
}
["down", "up", "move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents));canvas {
position: absolute;
top: 0px;
left: 0px;
}<canvas id="canvas"></canvas>NOTES
笔记
This works for 99% of gifs. Occasionally you will find a gif that does not play correctly. Reason: (I never bothered to find out). Fix: re-encode gif using modern encoder.
There are some minor inconsistencies that need fixing. In time I will provide a codePen example with ES6 and improved interface. Stay tuned.
这适用于 99% 的 gif。有时您会发现无法正确播放的 gif。原因：（我从来没有费心去发现）。修复：使用现代编码器重新编码 gif。
有一些轻微的不一致需要修复。我会及时提供一个带有 ES6 和改进接口的 codePen 示例。敬请关注。
回答by woold Lucky
Here ya go: You will need to exctract each frames and make an array out of them split frames: http://gifgifs.com/split/
来吧：您需要提取每个帧并从中制作一个数组分割帧：http://gifs.com/split/
easier if you have urls or path like http://lol.com/Img1.png...... http://lol.com/Img27.pngwith which you can do a simple loop like this:
如果你有像http://lol.com/Img1.png...... http://lol.com/Img27.png这样的 url 或路径，你可以做一个像这样的简单循环：
var Img = [];
for (var i = 0; i < 28; i++) {
Img[i] = new Image();
Img[i].src = "http://lol.com/Img"+i+".png";
}
function drawAnimatedImage(arr,x,y,angle,factor,changespeed) {
if (!factor) {
factor = 1;
}
if (!changespeed) {
changespeed = 1;
}
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle * Math.PI / 180);
if (!!arr[Math.round(Date.now()/changespeed) % arr.length]) {
ctx.drawImage(arr[Math.round(Date.now()/changespeed) % arr.length], -(arr[Math.round(Date.now()/changespeed) % arr.length].width * factor / 2), -(arr[Math.round(Date.now()/changespeed) % arr.length].height * factor / 2), arr[Math.round(Date.now()/changespeed) % arr.length].width * factor, arr[Math.round(Date.now()/changespeed) % arr.length].height * factor);
}
ctx.restore();
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var waitingWolf = [];
var url = ["https://i.imgur.com/k3T7psX.gif","https://i.imgur.com/CTSC8FC.gif","https://i.imgur.com/6NHLWKK.gif","https://i.imgur.com/U1u04sY.gif","https://i.imgur.com/4695vnQ.gif","https://i.imgur.com/oDO0YWT.gif","https://i.imgur.com/LqptRh1.gif","https://i.imgur.com/6gTxvul.gif","https://i.imgur.com/ULN5mqK.gif","https://i.imgur.com/RACB9WM.gif","https://i.imgur.com/4TZ6kNi.gif","https://i.imgur.com/9VvlzhK.gif","https://i.imgur.com/nGUnsfW.gif","https://i.imgur.com/2h8vLjK.gif","https://i.imgur.com/ZCdKkF1.gif","https://i.imgur.com/wZmWrYP.gif","https://i.imgur.com/4lhjVSz.gif","https://i.imgur.com/wVO0PbE.gif","https://i.imgur.com/cgGn5tV.gif","https://i.imgur.com/627gH5Y.gif","https://i.imgur.com/sLDSeS7.gif","https://i.imgur.com/1i1QNAs.gif","https://i.imgur.com/V3vDA1A.gif","https://i.imgur.com/Od2psNo.gif","https://i.imgur.com/WKDXFdh.gif","https://i.imgur.com/RlhIjaM.gif","https://i.imgur.com/293hMnm.gif","https://i.imgur.com/ITm0ukT.gif"]
function setup () {
for (var i = 0; i < 28; i++) {
waitingWolf[i] = new Image();
waitingWolf[i].src = url[i];
}
}
setup();
function yop() {
ctx.clearRect(0,0,1000,1000)
if (waitingWolf.length == 28) {
drawAnimatedImage(waitingWolf,300,100,0,1,60)
}
requestAnimationFrame(yop);
}
requestAnimationFrame(yop);<canvas id="myCanvas" width="1000" height="1000">
</canvas>回答by user431806
It is not possible to simply draw a .gif(animated!) on the <canvas>element.
You have two options.
不可能简单地.gif在<canvas>元素上绘制（动画！）。你有两个选择。
a) you can append the HTMLwith a <div>to which you append the .gif(via <img>node) and then layer the via z-Indexand css top/leftover the <canvas>, at the correct position. It will mess up with mouse events eventually tho, which can be solved by event propagation. I would consider this a poor mans solution.
一个），可以追加HTML用<div>给您追加.gif（经由<img>通孔节点），然后层z-Index和css top/left在所述<canvas>，在正确的位置。它最终会弄乱鼠标事件，这可以通过事件传播来解决。我会认为这是一个穷人的解决方案。
b) You need to learn how to animate stuff. Look up window.requestAnimationFramemethod. Doing so will allow you to animate on the <canvas>, which can emulate the .gifbehavior you are looking for. It will however be a bit complex at your current level i think.
b) 您需要学习如何制作动画。查window.requestAnimationFrame方法。这样做将允许您在 上设置动画<canvas>，这可以模拟.gif您正在寻找的行为。然而，我认为在你目前的水平上它会有点复杂。
You can draw the .gifon the canvaslike the above poster described. However, it will be 100 % static, like a .jpgor .pngin that case, unless you manage to dissolve the .gifinto its frames and still use the window.requestAnimationFramemethod.
可以得出.gif的canvas类似描述的上述海报。但是，它将是 100% 静态的，就像 a.jpg或.png在那种情况下，除非您设法将其溶解.gif到其帧中并仍然使用该window.requestAnimationFrame方法。
Basicly, if you want the animated behavior of a .gif, you will need to make major adjustments.
基本上，如果您想要 a 的动画行为.gif，您将需要进行重大调整。
回答by Barkermn01
You can use Gify & gifuct-js projects on Github.
你可以在 Github 上使用 Gify 和 gifuct-js 项目。
First, download your Animated gif and prepare the images you need to do this on page load.
首先，下载您的动画 gif 并准备在页面加载时执行此操作所需的图像。
var framesArray;
var currentFrame = 0;
var totalFrames = null;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.gif", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if(gify.isAnimated(arrayBuffer)){
var gif = new GIF(arrayBuffer);
framesArray = gif.decompressFrames(true);
totalFrames = framesArray.length;
}
};
oReq.send(null);
When you want your animation to show so in your draw loop
当您希望动画在绘制循环中显示时
if((xHero >= xMonster-10)&&(xHero <= xMonster + 10)){
// you need to work out from your frame rate when you should increase current frame
// based on the framerate of the gif image using framesArray[currentFrame].delay
// auto-detect if we need to jump to the first frame in the loop
// as we gone through all the frames
currentFrame = currentFrame % totalFrames;
var frame = framesArray[currentFrame];
var x,y;
// get x posstion as an offset from xHero
// get y posstion as an offset from yHero
objContexto.putImageData(frame.patch,x,y);
}
Please note this code is not tested I built following the documentation of the 2 projects so it might be a little wrong but it shows roughly how it is possible, the 3rd link is the online contents of the demo folder for the gitfuct-js library
请注意，此代码没有经过测试，我是按照 2 个项目的文档构建的，所以它可能有点错误，但它大致显示了它是如何可能的，第三个链接是 gitfuct-js 库的演示文件夹的在线内容
回答by Ayo K
Simply draw your image on the canvas at whatever position you want to insert your gif. I'll assume you want to insert your gif in the canvas meuCanvas.
只需在画布上要插入 gif 的任何位置绘制图像。我假设您想将 gif 插入画布中meuCanvas。
So:
所以：
if((xHero >= xMonster-10)&&(xHero <= xMonster + 10))
{
var ctx = document.getElementById('meuCanvas').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'http://media3.giphy.com/media/kEKcOWl8RMLde/giphy.gif';
}
回答by Nick Lewis
I'm also not quite sure what your problem is, but instead of:
我也不太确定你的问题是什么，但不是：
if((xHero >= xMonster-10)||(xHero <= xMonster + 10))
{
/*gif here*/
}
you probably want:
你可能想要：
if (xHero >= xMonster-10 && xHero <= xMonster + 10)
{
/*gif here*/
}
|| means OR
|| 意味着或
&& means AND
&& 表示 AND
In your code using OR makes the condition always true; that's probably not what you want.
在您的代码中使用 OR 使条件始终为真；这可能不是你想要的。
