Cross-End Canvas
- One-Canvas App Engine
- A Individuation, High-performance and Straightforward solution of Cross-End[Web & Native]
- 跨终端canvas渲染,从pc到mobile,从ie6 到 chrome,从web到native ,一体化的解决方案
- 绝对易用的api,方便的语法糖
- 无限嵌套组的概念
- 分层渲染,提升app渲染性能
- 易用的事件包装和代理
源码基于kissy的module的amd包装方式,但是不强依赖kissy。 build 出来的版本同时有基于kissy的版本和完全不依赖kissy的版本
- build/cec/cec.js 可使用
KISSY.use - build/cec/cec-nokissy.js 完全无依赖的版本,所有api挂在一个全局对象
CEC下
var stage = new CEC.Stage('canvas'); var layer = new CEC.Sprite.Rect({ x: 0, y: 0, width: 200, height: 200, fillColor: '#000' }).appendTo(stage); var button = new CEC.Sprite.Text({ x: 50, y: 50, width: 100, height: 100, backgroundImage: './images/btn.png', backgroundPosition: '50% 50%', backgroundSize: '100% auto', textColor: '#fff', textAlign: 'center', verticalAlign: 'middle', text: 'button', fontSize: 14 }).on('click', function (e) { //click handle }).appendTo(layer); // invoke render stage.render();
如果做app或者游戏,通常需要一个计时器来循环渲染。比如
CEC.Ticker.singleton.on('tick', function (dt) { stage.clear(); stage.render(dt); })
如果需要使用TWEEN的动画。可以类似这样
var stage = new CEC.Stage('canvas'); var rect = new CEC.Sprite.Rect({ x: 0, y: 0, width: 50, height: 50, fillColor: '#faf' }).appendTo(stage); var tween = new CEC.TWEEN.Tween({x: 0, y:0}).to({x: 100, y:100}, 500).easing(CEC.TWEEN.Easing.Bounce.Out).onUpdate(function () { rect.x = this.x; rect.y = this.y; }).start(); CEC.Ticker.singleton.on('tick', function (dt) { stage.clear(); stage.render(dt); CEC.TWEEN.update(); })
- background-repeat
- balls
- bind Evens
- drawImage(canvas) performance 【开console可以看到,drawImage(canvas)性能比drawImage(img)要差很多】
- font
- Frames Animation
- loader 【开console查看,注意retry和 超时的逻辑】
- package demo
- path sprite
- segment demo
- sprites group
- img, scale, rotate
- normal
- text sprite
- tween
- Post-Ninja 【厂内】
- N in 1 【厂内】