第三方的canvas庫(kù)
- konvaJS https://konvajs.github.io/ 通用
- echart http://echarts.baidu.com/ 圖表
- 白鷺時(shí)代 https://www.egret.com/ 游戲
- treeJS https://threejs.org/ 3d庫(kù)
Konva
Konva特點(diǎn)
面向?qū)ο蠓绞?/h4>
- 一切皆對(duì)象
- 如何定義對(duì)象 ①Object構(gòu)造函數(shù) ②直接量 {} ③自定義構(gòu)造函數(shù) 再new
- 構(gòu)造函數(shù) new一個(gè)構(gòu)造函數(shù)就可以得到對(duì)象（實(shí)例）
- this
- 原型 prototype / 原型鏈
konva概念
- 舞臺(tái) stage
- 層 layer
- 組 group
- 圖形
基本操作
- 創(chuàng)建舞臺(tái)
new Konva.Stage({
width:
height
})
- 創(chuàng)建層
new Konval.Layer({})
stage.add(layer)
- 圖形或組添加到 層
- 圖形添加到組
- 繪制 layer.draw()
基本圖形
- Konva.Rect() 矩形
- Konva.Circle() 圓形
- Konva.Ellipse() 橢圓
- Konva.Text() 文字
- Konva.Image() 圖片
- Konva.Line() 劃線
- Konva.star() 星星
- ....
事件
new Konva.Stage({
width:
height
})
new Konval.Layer({})
stage.add(layer)
類似于jquery
動(dòng)畫(huà)
- tween對(duì)象 指定動(dòng)畫(huà)持續(xù)時(shí)間 指定變化的樣式 tween.play()
- 簡(jiǎn)寫(xiě) 圖形.to()
- Animation對(duì)象
