第三方的canvas庫

• konvaJS https://konvajs.github.io/ 通用
• echart http://echarts.baidu.com/ 圖表
• 白鷺時代 https://www.egret.com/ 游戲
• treeJS https://threejs.org/ 3d庫

Konva

Konva特點(diǎn)

面向?qū)ο蠓绞?/h4>

• 一切皆對象
• 如何定義對象 ①Object構(gòu)造函數(shù) ②直接量 {} ③自定義構(gòu)造函數(shù) 再new
• 構(gòu)造函數(shù) new一個構(gòu)造函數(shù)就可以得到對象（實(shí)例）
• this
• 原型 prototype / 原型鏈

konva概念

• 舞臺 stage
• 層 layer
• 組 group
• 圖形

基本操作

• 創(chuàng)建舞臺
  new Konva.Stage({
  width:
  height
  })
• 創(chuàng)建層
  new Konva.Layer({})
  stage.add(layer)
• 圖形或組添加到 層
• 圖形添加到組
• 繪制 layer.draw()

 第三方的canvas庫

基本圖形

• Konva.Rect() 矩形
• Konva.Circle() 圓形
• Konva.Ellipse() 橢圓
• Konva.Text() 文字
• Konva.Image() 圖片
• Konva.Line() 劃線
• Konva.Star() 星星
• ....

事件

類似于jquery

動畫

• tween對象 指定動畫持續(xù)時間 指定變化的樣式 tween.play()
• 簡寫 圖形.to()
• Animation對象