Konva.js--矩形案例

最新推荐文章于 2024-08-18 10:23:48 发布

吃瓜群众欢乐多

最新推荐文章于 2024-08-18 10:23:48 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签： canvas Konva.js

本文链接：https://blog.csdn.net/sinat_36146776/article/details/53319796

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图如下：

<!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