Canvas开发库封装

一、Canvas第三方类库

1、常见的第三方类库

• konva.js
  

  
  
  
  

  
  
  

• chart.js 图表插件

• eccharts 图表插件（百度）

• tree.js(3d webgl 库)

二、第三方类库Konva

1、Konva的结构

• 舞台(stage)-->层(layer)-->图形

• Statge -->Layer -->分组（-->分组-->）-->图形

  Stage
  |
  +------+------+
  | |
  Layer Layer
  | |
  +-----+-----+ Shape
  | |
  Group Group
  | |
  + +---+---+
  | | |
  Shape Group Shape
  |
  +
  |
  Shape

2、Konva绘制图形

• Konva.Rect

• Konva.Circle

  //绘制圆形
  var circle=new Konva.Circle({
  x:stage.getWidth()/2,
  y:stage.getHeight()/2,
  radius:100,
  stroke:"red",
  fill:"green"
  });
  layer.add(circle);

• Konva.Wedge

  //绘制扇形
  var wedge=new Konva.Wedge({
  x:200,
  y:400,
  radius:100,
  fill:"yellow",
  stroke:"orange",
  angle:90,
  rotation:-10
  });
  layer.add(wedge);

• Konva.Line

  //绘制线条
  var line1=new Konva.Line({
  points:[700,100,900,200,800,400],
  stroke:"skyblue",
  strokeWidth:4,
  lineCap:"round",
  lineJoin:"round",
  closed:true,
  tension:true//曲线
  });
  layer.add(line1);

• Konva.Star

• Konva.Image

3、事件

点击正方形改变圆角最后变成圆

4、绘制

创建一个矩形： Konva.Rect(option);

//Konva使用的基本案例
//第一步：创建舞台
var stage = new Konva.Stage({
container: 'container', //需要存放舞台的Dom容器
width: window.innerWidth, //设置全屏
height: window.innerHeight
});

//第二步：创建层
var layer = new Konva.Layer(); //创建一个层
stage.add(layer); //把层添加到舞台

//第三步： 创建矩形
var rect = new Konva.Rect({ //创建一个矩形
x: 100, //矩形的x坐标，相对其父容器的坐标
y: 100,
width: 100, //矩形的宽度
height: 100, //矩形高度
fill: 'gold', //矩形填充的颜色
stroke: 'navy', //矩形描边的颜色
strokeWidth: 4, //填充宽度
opactity: .2, //矩形的透明度
scale: 1.2, //矩形的缩放 1：原来大小
rotation: 30, //旋转的角度，是deg不是弧度。
cornerRadius: 10, //圆角的大小（像素）
id: 'rect1', //id属性，类似dom的id属性
name: 'rect',
draggable: true //是否可以进行拖拽
});

//创建一个组
var group = new Konva.Group({
x: 40,
y: 40,
});
group.add( rect ); //把矩形添加到组中

//第四步： 把形状放到层中
layer.add( group ); //把组添加到层中
layer.draw(); //绘制层到舞台上

5、动画

01、Konva.Tween

• 1、tween的控制方法
• tween.play(), //播放动画
• tween.pause(), //暂停动画
• tween.reverse(), //动画逆播放
• tween.reset(), //重置动画
• tween.finish(), //立即结束动画
• seek：英文：寻找 英 [siːk] 美 [sik]
• 2、tween的缓动控制选项
• Konva.Easings.Linear //线性
• Konva.Easings.EaseIn //缓动，先慢后快
• Konva.Easings.EaseOut //先快后慢
• Konva.Easings.EaseInOut //两头慢，中间快
• Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
• Konva.Easings.BackEaseOut
• Konva.Easings.BackEaseInOut
• Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
• Konva.Easings.ElasticEaseOut
• Konva.Easings.ElasticEaseInOut
• Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回 英 [baʊns] 美 [baʊns]
• Konva.Easings.BounceEaseOut
• Konva.Easings.BounceEaseInOut
• Konva.Easings.StrongEaseIn //强力
• Konva.Easings.StrongEaseOut
• Konva.Easings.StrongEaseInOut

02、Konva.to

• to就是对tween的封装，比较简单好用

  heart.to({
  scaleX:.5,
  scaleY:.5,
  duration:2,
  yoyo:true
  });