web-dev-qa-db-ja.com

Canvasでgifを配置する方法

私はゲームを作成しています。ゲームでは、ヒーローがモンスターの近くにいると、プレイヤーを怖がらせるために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>

実際のコードは非常に大きいため、これは簡略化されたコードです。

助けてくれてありがとう! :)

7
Grandtour

GIF画像をキャンバスに読み込んで再生します。

回答がサイズ制限を超えたため、詳細なコードコメントの多くを削除する必要がありました。

プロセス全体がかなり複雑であるため、詳細には触れません。

キャンバスでGIFをアニメーション化する唯一の方法は、GIF画像をjavascriptでデコードすることです。幸いなことに、画像サイズ、カラーパレット、タイミング情報、コメントフィールド、フレームの描画方法を含むブロックにデータが配置されているため、フォーマットはそれほど複雑ではありません。

カスタムGIFロードおよびプレーヤー。

次の例には、ビデオの再生方法に似たGIFを再生できるURLからカスタム形式のGIF画像を作成するGIFというオブジェクトが含まれています。すべてのGIFフレームに任意の順序でランダムにアクセスすることもできます。

多くのコールバックとオプションがあります。コメントには基本的な使用情報があり、コードはgifのロード方法を示しています。 pauseplayseek(timeInSeconds)seekFrame(frameNumber)playSpeedなどを制御するプロパティに対する関数があります。アクセスはすぐに行われるため、シャトルイベントはありません。

 var myGif = GIF();
 myGif.load("GIFurl.gif");

ロードしたら

 ctx.drawImage(myGif.image,0,0); // will draw the playing gif image

または、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です。

コードは現状のままであり、例としてのみ[〜#〜] not [〜#〜]を商用利用します。

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 [〜#〜]

  • これは、gifの99%で機能します。時折、正しく再生されないgifを見つけることがあります。理由:(私はわざわざ調べることはありませんでした)。修正:最新のエンコーダーを使用してgifを再エンコードします。

  • 修正が必要な軽微な不整合がいくつかあります。やがて、ES6と改良されたインターフェースを備えたcodePenの例を提供します。乞うご期待。

14
Blindman67

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つのプロジェクトのドキュメントに従ってビルドしたため、少し間違っている可能性がありますが、大まかにそれがどのように可能かを示しています、3番目のリンクはgitfuct-jsライブラリのデモフォルダのオンラインコンテンツです

  1. https://github.com/rfrench/gify
  2. https://github.com/matt-way/gifuct-js
  3. http://matt-way.github.io/gifuct-js/
2
Martin Barker

GIFを挿入したい任意の位置で、キャンバスに画像を描くだけです。キャンバスmeuCanvasにgifを挿入すると仮定します。

そう:

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';

}
1
Ayo K

.gif要素に<canvas>(アニメーション!)を単純に描くことはできません。 2つのオプションがあります。

a)<div>を(.gifノード経由で)追加する<img>HTMLを追加し、その後、z-Indexcss top/leftを適切な位置で<canvas>に重ねることができます。最終的にはマウスイベントが台無しになりますが、これはイベント伝播によって解決できます。私はこれを貧しい人々の解決策と考えます。

b)ものをアニメーション化する方法を学ぶ必要があります。 window.requestAnimationFrameメソッドを検索します。そうすることで、<canvas>をアニメーション化でき、探している.gifの動作をエミュレートできます。ただし、現在のレベルでは少し複雑になると思います。

上記のポスターのように、canvas.gifを描画できます。ただし、その場合の.jpg.pngのように、.gifをフレームにディゾルブし、それでもwindow.requestAnimationFrameメソッドを使用しない限り、100%静的です。

基本的に、.gifのアニメーション化された動作が必要な場合は、大幅に調整する必要があります。

1
user431806