一、Canvas第三方類庫
1、常見的第三方類庫
konva.js
body{
margin:0;
}
//創建舞台
var stage=new Konva.Stage({
container:"#box",
width: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();
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
//創建舞台
var stage=new Konva.Stage({
container:"#box",
width: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,
width:100,
height:100,
stroke:"red"
});
group.add(rect);
layer.draw();
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、事件
點擊正方形改變圓角最后變成圓
//創建舞台
var stage=new Konva.Stage({
container:"#box",
width: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,
width: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();
})
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
//創建舞台
var stage=new Konva.Stage({
container:"#box",
width: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();
})
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
});
