sprite2 轻量级的 canvas 绘图库
像操作 DOM 元素一样操作 canvas 中的“精灵”
特性
- 支持 attr 属性设置精灵样式
- 支持 web animations api 精灵动画
- 支持精灵的 canvas 滤镜
- 支持精灵的 mouse 和 touch 事件
- 优化的渲染性能
Usage
在浏览器中使用
快速上手
示例
const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json'const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png' ;{ const paper = sprite2 paper // 设置 Paper 的实际分辨率 const cacheMap = Sprite { super'bird1.png' } //共用缓存,提高性能 { const key = JSON + this ifcacheMap return cacheMap } { ifcontext == null cacheMapclear return const key = JSON + this if!cacheMap cacheMap } await paper const bglayer = paper // 背景层 // 前景层 // 每次最多渲染 50 个 sprite,并且不代理事件,提升性能 fglayer = paper const axisZero = 400 400 const circle = circle bglayer { return p10 + p20 p11 + p21 } { return p10 - p20 p11 - p21 } { return } { const birdPoint = bird const randomArc = Math * 2 * MathPI const randomPoint = const dist = const distance = Math const flip = dist0 < 0 ? -1 : 1 const duration = 5 * distance + 100 bird //scale 放在外面,触发缓存 bird const anim = bird await animfinished } let birdCount = 0 { spriteCountinnerHTML = ++birdCount const bird = bird fglayer //noprotect do await while1 } circle //显示 fps ,注意,因为本框架采用的是非定时渲染,即只有 sprite 有更新时才渲染 //所以所有精灵不运动的时候 fps 也会降下来 windowfglayer = fglayer windowpaper = paper}