一、Canvas第三方类库
1、常见的第三方类库
-
konva.js
<style> body{ margin:0; } </style> </head> <body> <div id="box"></div> <script src="../konva/konva.min.js"></script> <script> //创建舞台 var stage=new Konva.Stage({ container:"#box", window.innerWidth, height:window.innerHeight }); //创建层 var layer=new Konva.Layer({ }); stage.add(layer); //创建图形 var star=new Konva.Star({ x:stage.getWidth()/2, y:stage.getHeight()/2, innerRadius:80, outerRadius:200, fill:"Red" }); layer.add(star); //绘制层 layer.draw(); </script> -
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
<script> //创建舞台 var stage=new Konva.Stage({ container:"#box", window.innerWidth, height:window.innerHeight }); //创建层 var layer=new Konva.Layer({ x:100, y:100 }); stage.add(layer); //创建一个组 var group=new Konva.Group({ x:100, y:100 }); layer.add(group); //创建矩形 var rect=new Konva.Rect({ x:0, y:0, 100, height:100, stroke:"red" }); group.add(rect); layer.draw(); </script> -
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、事件
点击正方形改变圆角最后变成圆
<div id="box"></div>
<script src="../konva/konva.min.js"></script>
<script>
//创建舞台
var stage=new Konva.Stage({
container:"#box",
window.innerWidth,
height:window.innerHeight
});
var layer=new Konva.Layer({
});
stage.add(layer);
var rect=new Konva.Rect({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
200,
height:200,
stroke:"#000",
strokeWidth:5,
fill:"yellow",
offset:{
x:100,
y:100
}
});
layer.add(rect);
layer.draw();
rect.on("click",function(ev){
rect.cornerRadius(rect.cornerRadius()+5);
rect.scale({
x:1.5,
y:1.5
})
layer.draw();
})
</script>
4、绘制
创建一个矩形： Konva.Rect(option);
//Konva使用的基本案例
//第一步：创建舞台
var stage = new Konva.Stage({
container: 'container', //需要存放舞台的Dom容器
window.innerWidth, //设置全屏
height: window.innerHeight
});
//第二步：创建层
var layer = new Konva.Layer(); //创建一个层
stage.add(layer); //把层添加到舞台
//第三步： 创建矩形
var rect = new Konva.Rect({ //创建一个矩形
x: 100, //矩形的x坐标，相对其父容器的坐标
y: 100,
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
<div id="box"></div>
<script src="../konva/konva.min.js"></script>
<script>
//创建舞台
var stage=new Konva.Stage({
container:"#box",
window.innerWidth,
height:window.innerHeight
});
var layer=new Konva.Layer({
});
stage.add(layer);
//绘制五星
var star=new Konva.Star({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
innerRadius:100,
outerRadius:200,
fill:"orange",
stroke:"red",
strokeWidth:6,
numPoints:6
});
layer.add(star);
layer.draw();
var tween=new Konva.Tween({
node:star,
duration:2,
rotation:360,
easing:Konva.Easings.Linear,
// yoyo:true
onFinish:function(){
tween.reset();
tween.play();
}
});
tween.play();
star.on("mouseenter",function(){
tween.pause();
}).on("mouseleave",function(){
tween.play();
})
</script>
- 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 });