SpriteJS is a cross-terminal Canvas drawing framework open source by 360 Qiqi. It can quickly draw structured UI, animation and interactive effects based on Canvas, and publish to any platform with canvas environment (such as browser, applets and Node).

  • Official website: http://spritejs.org
  • Making address: https://github.com/spritejs/spritejs
  • The DEMO sample: http://spritejs.org/demo/

Why SpriteJS

As we know, Canvas API can flexibly draw various vector graphics to the canvas, but canvas API itself is relatively low-level. For example, we want to draw a red rectangle with rounded corners in the center of the canvas. Using canvas native API, we need to do as follows:

const canvas = document.getElementById('paper')
const context = canvas.getContext('2d')

const [x, y, w, h, r] = [200.200.200.200.50]

context.fillStyle = 'red'
context.beginPath()
context.moveTo(x + r, y)
context.arcTo(x + w, y, x + w, y + h, r)
context.arcTo(x + w, y + h, x, y + h, r)
context.arcTo(x, y + h, x, y, r)
context.arcTo(x, y, x + w, y, r)
context.closePath()
context.fill()
Copy the code

To achieve the same effect, use SpriteJS to write:

const scene = new spritejs.Scene('#container')
const layer = scene.layer()

const s = new spritejs.Sprite({
  anchor: 0.5.bgcolor: 'red'.pos: [300.300].size: [200.200].borderRadius: 50,
})

layer.append(s)
Copy the code

Sprite creates a DOM-like object model for graphics, so we can create Sprite elements and append them to the Layer in the same way we create DOM elements to render them to the canvas. SpriteJS has the following features:

  • Document object model based on Canvas
  • Four basic Sprite types: Sprite, Path, Label, and Group
  • Support basic and advanced wizard properties, wizard box model, attributes and CSS3 has a high degree of consistency.
  • Simple and powerful Transition, Animation API
  • Support Sprite images and resource preloading
  • Extensible event mechanism
  • High-performance caching strategy
  • Friendly to D3, match-JS, Proton and other third party libraries
  • Cross-platform, support server rendering, wechat small program

Basic Usage

SpriteJS can be used either by NPM or directly by loading the CDN version

NPM install spritejs - saveCopy the code
<script src="/ / lib.baomitu.com/spritejs/2.0.0-alpha.28/spritejs.min.js"></script>
Copy the code

Note: Node-Canvas installation is required to use it on the server

The following is a simple usage example, or you can go directly to JSBin to see the effect.

const {Scene, Sprite} = spritejs

const scene = new Scene('#demo-quickStart', {viewport: [770.200].resolution: [3080.800]})

const layer = scene.layer()

const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png')

robot.attr({
  anchor: [0.0.5].pos: [0.0],
})

robot.animate([
  {pos: [0.0] {},pos: [0.300] {},pos: [2700.300] {},pos: [2700.0]}, {duration: 5000.iterations: Infinity.direction: 'alternate',
})

layer.append(robot)
Copy the code

The document

  • The use of complete documentation: Chinese | EN
  • All kinds of examples
  • Detailed API documentation

If you want to know more about SpriteJS or want to contribute code to SpriteJS, you can follow our GitHub repository. Your precious star is our biggest encouragement and support. If you have any questions about SpriteJS, or need to know more details, you can join SpriteJS official QQ group: