第三方的canvas库
- konvaJS https://konvajs.github.io/ 通用
- echart http://echarts.baidu.com/ 图表
- 白鹭时代 https://www.egret.com/ 游戏
- treeJS https://threejs.org/ 3d库
面向对象方式
- 一切皆对象
-
如何定义对象 ①Object构造函数 ②直接量 {} ③自定义构造函数 再new
** 构造函数 new一个构造函数就可以得到对象（实例）* - this
- 原型 prototype / 原型链
konva概念
- 舞台 stage，整个视图看做是一个舞台 stage，舞台中可以绘制很多个层 layer
- 层 layer，layer下面可以有很多的group
- 组 group,group下面可以有 矩形、图片、其他形状等
- 图形
基本操作
- 创建舞台
new Konva.Stage({
container:'container' //存放舞台的容器
width:window.innerWidth //设置全屏
height:
})
- 创建层
new Konval.Layer({}) //创建一个层
stage.add(layer) //将层添加到舞台 - 图形或组添加到 层
- 图形添加到组
- 绘制 layer.draw()
基本图形
- Konva.Rect() 矩形
- Konva.Circle() 圆形
- Konva.Ellipse() 椭圆
- Konva.Text() 文字
- Konva.Image() 图片
- Konva.Line() 划线
- Konva.star() 星星
- ....
事件
类似于jquery
rect.on("mouseenter", function(){ this.rotation(45); layer.draw(); }).on("mouseleave", function(){ this.rotation(0); layer.draw(); })
动画
-
tween对象 指定动画持续时间 指定变化的样式 tween.play()
- tween可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
- tween.play() //播放动画
- tween.pause() //暂停动画
- otween.reset() //重置动画
- otween.finish() //立即结束动画
简写 图形.to()是对tween的封装
-
Animation对象
var anim=new Konva.Animation(function(frame){
//动画系统提供的frame有三个属性可以使用：
var time=frame.time //动画执行总时间
var timeDiff=frame.timeDiff //距离上一帧的时间
var frameRate=frame.frameRate //帧率（即1000/时间间隔）
//动画的动作}，layer)
anim.stop()//结束动画
