一、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", 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(); </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", 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(); </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",
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();
})
</script>
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
<div id="box"></div>
<script src="../konva/konva.min.js"></script>
<script>
//創建舞台
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();
})
</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 });