html5 strongeaseinout,Canvas開發庫封裝

一、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

});