标签：使用 nts 英文 一点 out 宽度 linear 选项 好用
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>tree.js(3d webgl 库)
Statge -->Layer -->分组（-->分组-->）-->图形
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
ShapeKonva.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.Image
//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(); //绘制层到舞台上 <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>Konva.Easings.StrongEaseInOut
to就是对tween的封装，比较简单好用
heart.to({
scaleX:.5,
scaleY:.5,
duration:2,
yoyo:true
});标签：使用 nts 英文 一点 out 宽度 linear 选项 好用
原文地址：http://www.cnblogs.com/DCL1314/p/7875410.html
