-
第三方的canvas库
- konvaJS https://konvajs.github.io/ 通用
- echart http://echarts.baidu.com/ 图表
- 白鹭时代 https://www.egret.com/ 游戏
- treeJS https://threejs.org/ 3d库
- Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果.
konva概念
- 舞台 stage
- 层 layer
- 组 group
- 图形
基本操作
- 创建舞台
var stage = new Konva.Stage({
container:"box",
width:1000,
height:600
});
- 创建层
var layer = new Konva.Layer();
stage.add(layer);
...........
layer.draw(); //绘制层
基本图形
- Konva.Rect() 矩形
var rect = new Konva.Rect({
x:100,
y:100,
width:200,
height:100,
fill:"red",
stroke:"green",
strokeWidth:10,
cornerRadius:5,
//rotation:45
draggable:true
})
layer.add(rect);
- Konva.Circle() 圆形
var circle = new Konva.Circle({
x:300,
y:300,
radius:100,
stroke:"orange",
strokeWidth:4,
fill:"green",
draggable:true,
dash:[10,5,20,5]
})
layer.add(circle);
- Konva.Wedge() 扇形
var wedge = new Konva.Wedge({
x:500,
y:500,
radius:100,
fill:"yellow",
stroke:"green",
angle:60,
rotation:90
})
layer.add(wedge);
- Konva.Ellipse() 椭圆
- Konva.Text() 文字
var text = new Konva.Text({
x:700,
y:30,
text:"小萍萍\n您好",
fontSize:60,
fontFamily:"MicrosoftYaHei",
fill:"green",
stroke:"red"
})
layer.add(text);
- Konva.Image() 图片
- Konva.Line() 划线
var line = new Konva.Line({
points:[10,10,500,10,500,200],
stroke:"green",
strokeWidth:3,
dash:[10,5],
closed:true
});
layer.add(line);
- Konva.star() 星星
var star = new Konva.Star({
x:600,
y:400,
innerRadius:50,
outerRadius:100,
numPoints:12,
fill:"red"
});
layer.add(star);
- 绘制曲线
var line2 = new Konva.Line({
points:[20,200,500,200,400,400],
stroke:"blue",
strokeWidth:5,
tension:-2
})
layer.add(line2);
事件
类似于jquery
var rect = new Konva.Rect({
x:100,
y:100,
width:200,
height:200,
fill:"red",
stroke:"green",
strokeWidth:5,
cornerRadius:5,
})
layer.add(rect);
rect.on("mouseenter", function(){
this.rotation(45);
layer.draw();
}).on("mouseleave", function(){
this.rotation(0);
layer.draw();
})
layer.draw();
动画
- tween对象 指定动画持续时间 指定变化的样式 tween.play()
//持续转动 动画
var star = new Konva.Star({
numPoints:10,
x:500,
y:200,
innerRadius:50,
outerRadius:100,
fill:"red"
})
layer.add(star);
var tween1 = new Konva.Tween({
node:star,
duration:1,
rotation:360,
onFinish:function(){
tween1.reset();
tween1.play();
}
});
tween1.play();
- 简写 图形.to()
var rect2 = new Konva.Rect({
x:400,
y:400,
width:100,
height:50,
stroke:"green",
fill:"red"
})
layer.add(rect2);
rect2.to({
duration:1,
width:200,
height:100
})
- Animation对象
//持续转动 动画
var star = new Konva.Star({
numPoints:5,
x:500,
y:200,
innerRadius:50,
outerRadius:100,
fill:"red"
})
layer.add(star);
//Animation对象
var animate = new Konva.Animation(function(frame){
//console.log(frame);
star.rotate(10);
}, layer);
animate.start();
//进度条案例
var stage=new Konva.Stage({
container:"box",
width:window.innerWidth,
height:window.innerHeight
})
var layer=new Konva.Layer()
stage.add(layer)
var width=800;
var progressValue=new Konva.Rect({
x:200,
y:200,
width:0,
height:50,
fill:"#abcdef"
})
layer.add(progressValue)
var progressLine=new Konva.Rect({
x:200,
y:200,
width:width,
height:50,
stroke:"#369",
strokeWidth:4,
cornerRadius:5
})
layer.add(progressLine)
layer.draw()
var animation=new Konva.Animation(function(){
if(progressValue.width()<width){
progressValue.width(progressValue.width()+10)
}else{
animation.stop()
}
},layer)
animation.start()
