gif-gifcanvas
TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

GifCanvas

Gif Canvas creator

npm node-current GitHub Repo stars

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

Example gif

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);
    }
});

Package Sidebar

Install

npm i gif-gifcanvas

Weekly Downloads

3

Version

1.4.0

License

GPL-3.0-only

Unpacked Size

41 kB

Total Files

7

Last publish

Collaborators

  • flexice