如何使用 Canvas 放置 gif
[英]How to put a gif with Canvas
问题描述
我正在创建一个游戏，在我的游戏中，当 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>
这是简化的代码，因为真正的代码很大！
感谢您的帮助！ :)
6 个解决方案
解决方案1
31 2018-01-19 19:52:20
加载和播放 GIF 图像到画布。
抱歉回答超出了大小限制，不得不删除很多详细的代码注释。
由于整个过程相当复杂，我不打算详细说明。
在画布中获得 GIF 动画的唯一方法是在 javascript 中解码 GIF 图像。 幸运的是，格式并不太复杂，数据按块排列，包含图像大小、调色板、时间信息、注释字段以及帧的绘制方式。
自定义 GIF 加载和播放器。
下面的示例包含一个名为GIF的对象，该对象将从可以播放类似于视频播放方式的 GIF 的 URL 创建自定义格式的 GIF 图像。 您还可以按任意顺序随机访问所有 GIF 帧。
有很多回调和选项。 注释中有基本的使用信息，代码显示了如何加载 gif。 有pause和play功能， seek(timeInSeconds)和seekFrame(frameNumber) ，属性来控制playSpeed等等。 没有穿梭事件，因为访问是立即的。
var myGif = GIF();
myGif.load("GIFurl.gif");
一旦加载
ctx.drawImage(myGif.image,0,0); // will draw the playing gif image
或通过frames缓冲区访问frames
ctx.drawImage(myGif.frames[0].image,0,0); // draw frame 0 only.
转到 GIF 对象的底部以查看所有带有注释的选项。
GIF 必须是相同的域或具有 CORS 标头
演示中的 gif 来自wiki commons ，包含 250 多个帧，一些低端设备会遇到问题，因为每一帧都被转换为完整的 RGBA 图像，这使得加载的 GIF 显着大于 gif 文件大小。
演示
加载 gif，显示已加载的帧数和帧数。 当加载 100 个粒子时，每个粒子都以独立速度和独立方向播放的随机访问帧显示在背景中。
前景图像是以文件中嵌入的帧速率播放的 gif。
代码原样，仅作为示例，不得用于商业用途。
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(); mx = e.pageX - m.bounds.left - scrollX; my = 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>
笔记
这适用于 99% 的 gif。 有时您会发现无法正确播放的 gif。 原因：（我从来没有费心去发现）。 修复：使用现代编码器重新编码 gif。
有一些轻微的不一致需要修复。 我会及时提供一个带有 ES6 和改进接口的 codePen 示例。 请继续关注。
解决方案2
9 2020-04-23 01:48:56
来吧：您需要提取每个帧并从中制作一个数组分割帧： http ://gifs.com/split/
如果你有像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>
解决方案3
3 2018-01-18 13:55:06
你可以在 Github 上使用 Gify 和 gifuct-js 项目。
首先，下载您的动画 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);
当您希望动画在绘制循环中显示时
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);
}
请注意，此代码没有经过测试，我是按照 2 个项目的文档构建的，所以它可能有点错误，但它大致显示了它是如何实现的，第三个链接是 gitfuct-js 库的演示文件夹的在线内容
解决方案4
2 2018-01-18 08:24:02
不可能在<canvas>元素上简单地绘制.gif （动画！）。 你有两个选择。
a) 您可以使用<div>附加HTML ，您将.gif附加到其中（通过<img>节点），然后将 via z-Index和css top/left放在<canvas> css top/left ，在正确的位置。 它最终会弄乱鼠标事件，这可以通过事件传播来解决。 我会认为这是一个穷人的解决方案。
b) 您需要学习如何制作动画。 查找window.requestAnimationFrame方法。 这样做将允许您在<canvas>上设置动画，它可以模拟您正在寻找的.gif行为。 然而，我认为在你目前的水平上它会有点复杂。
您可以像上面描述的海报一样在canvas上绘制.gif 。 但是，它将是 100% 静态的，就像在这种情况下的.jpg或.png一样，除非您设法将.gif溶解到其框架中并仍然使用window.requestAnimationFrame方法。
基本上，如果您想要.gif的动画行为，您将需要进行重大调整。
解决方案5
1 2018-01-17 09:05:17
只需在画布上要插入 gif 的任何位置绘制图像。 我假设您想将 gif 插入画布meuCanvas 。
所以：
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';
}
解决方案6
-1 2018-01-13 03:56:38
我也不太确定你的问题是什么，但不是：
if((xHero >= xMonster-10)||(xHero <= xMonster + 10))
{
/*gif here*/
}
你可能想要：
if (xHero >= xMonster-10 && xHero <= xMonster + 10)
{
/*gif here*/
}
|| 意味着或
&& 表示 AND
在您的代码中使用 OR 使条件始终为真； 这可能不是你想要的。
如何在 canvas 上绘制 GIF？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.