https://github.com/markbrouch/canvasmark

jQuery plugin for animating a spritesheet on a canvas element
https://github.com/markbrouch/canvasmark

Last synced: about 2 months ago
JSON representation

jQuery plugin for animating a spritesheet on a canvas element

• Host: GitHub
• URL: https://github.com/markbrouch/canvasmark
• Owner: markbrouch
• Created: 2014-05-12T22:57:57.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2014-05-14T21:27:09.000Z (about 12 years ago)
• Last Synced: 2025-03-23T04:13:19.447Z (over 1 year ago)
• Language: JavaScript
• Size: 137 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
canvasMark

==========

jQuery plugin for animating a spritesheet on a canvas element

Takes a sprite sheet with frames of equal size positioned left-to-right top-to-bottom order and renders it to a Canvas element.

Usage

=====

Call canvasMark on a canvas tag with additional properties:

    

    

    

        $('#myCanvas').canvasMark({

          spriteSheet: '/path/to/spritesheet.jpg',

          sprite: {

            width: 960,

            height: 540

          },

          fps: 30

        });

    

* spriteSheet - The path to the spritesheet resource.

* sprite - Object containing properties width and height of a single sprite on the spritesheet resource.

* fps - Frames per second to playback animation. If unspecified, defaults to 60.

Canvas animation can be controlled via triggers on the canvas element:

    

        $('canvas').trigger('pause'); // Pauses playback

        $('canvas').trigger('move', {frames: 5}); // Advances animation 5 frames.

    

The following triggers are available:

* play

* pause

* next

* prev

* move, {frames: i}