gifcanvas's Introduction

GifCanvas

Gif Canvas creator

How to install

npm i gif-gifcanvas

yarn add gif-gifcanvas

Constructor

Param	Type	Default
canvas	`Canvas`
options?	delay: `number` fps: `number` repeat: `number`	0,60,0

Method	Returns
addFrame()	`GifCanvas`
end()	`Buffer`
animation()	`GifCanvas`

Example

const { GifCanvas } = require('gif-gifcanvas');
const { createCanvas } = require("canvas");
const { writeFile } = require('fs')
const path = require("path");

const canvas = createCanvas(250, 250);
const gifcanvas = new GifCanvas(canvas);

for (let i = 0; i < gifcanvas.canvas.width - 50; i+=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(i, 0, 50, 50);
    });
}

for (let i = 0; i < gifcanvas.canvas.height - 50; i+=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(200, i, 50, 50);
    });
}

for (let i = 200; i > 0; i-=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(i, 200, 50, 50);
    });
}

for (let i = 200; i > 0; i-=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, i, 50, 50);
    });
}

writeFile(path.join(__dirname, './example.gif'), gifcanvas.end(), (err) => {
    if (err) {
        console.error(err);
    }
});

Recommend Projects