第三方的canvas庫
- konvaJS https://konvajs.github.io/ 通用
- echart http://echarts.baidu.com/ 圖表
- 白鷺時代 https://www.egret.com/ 游戲
- treeJS https://threejs.org/ 3d庫
Konva
Konva特點
面向?qū)ο蠓绞?/h4>
- 一切皆對象
- 如何定義對象 ①Object構(gòu)造函數(shù) ②直接量 {} ③自定義構(gòu)造函數(shù) 再new
- 構(gòu)造函數(shù) new一個構(gòu)造函數(shù)就可以得到對象（實例）
- this
- 原型 prototype / 原型鏈
konva概念
- 舞臺 stage
- 層 layer
- 組 group
- 圖形
基本操作
- 創(chuàng)建舞臺
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
動畫
- tween對象 指定動畫持續(xù)時間 指定變化的樣式 tween.play()
- 簡寫 圖形.to()
- Animation對象
