本文主要是介绍Konva.js--矩形案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 移动端必须加上这句 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title></title><style>body {padding: 0;margin: 0;background-color: #f0f0f0;overflow: hidden;}</style><script src="bower_components/konva/konva.min.js"></script>
</head>
<body><div id="container"></div><script type="text/javascript">var stage=new Konva.Stage({container:'container',width:window.innerWidth,height:window.innerHeight})//创建层var layer=new Konva.Layer();stage.add(layer);//中心坐标var centX=stage.width()/2;var centY=stage.height()/2;var x=1/8*stage.width();var y=centY;var height=1/12*stage.height();var maxWidth=3/4*stage.width();//绘制进度条var innerRect=new Konva.Rect({x:x,y:y,width:100,height:height,opacity:.7,fill:'lightblue',cornerRadius:height/3});//把矩形放入层中layer.add(innerRect);//外部边框var outRect=new Konva.Rect({x:x,y:y,width:maxWidth,height:height,stroke:'blue',strokeWidth:'4',cornerRadius:height/3})//把矩形放入层中layer.add(outRect);layer.draw();//Konva的动画状态innerRect.to({width:maxWidth,//动画最终的长度duration:1.4,//动画持续时间easing:Konva.Easings.StrongEaseIn//动画效果})</script>
</body>
</html>动画效果的列项：
* 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
这篇关于Konva.js--矩形案例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
