面向对象封装--行星旋转案例canvas-konva.js

最新推荐文章于 2024-04-22 22:44:01 发布

吃瓜群众欢乐多

最新推荐文章于 2024-04-22 22:44:01 发布

阅读量2.4k

点赞数

文章标签： canvas Konva.js 面向对象

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

版权

如图所示案例：

具体讲解：在stage上面绘制一个背景层和一个运动层，背景层保持不变，运动层会随着Animation设置的而运动，而且当鼠标经过运动层的圆圈时，运动速度会明显变慢，鼠标移开后，立马恢复原来运动速度。CSS3和HTML5放入一组中，该所属组顺时针旋转，JS所属组逆时针旋转；字体随着运动，自身反向旋转便能使其永远朝上显示。

html代码：

<!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>webitcast案例</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #f0f0f0;
			overflow: hidden;
		}
	</style>
	<script src="bower_components/konva/konva.min.js"></script>
	<script type="text/javascript" src="js/zxjwebitcast.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 bgLayer=new Konva.Layer();
		stage.add(bgLayer);
		//开始创建圆形
		//中心点坐标
		var centX=stage.width()/2;
		var centY=stage.height()/2;
		//圆形的半径
		var innerRadius=126;
		var outerRadius=220;
		//虚线圆环
		var innerCircle=new Konva.Circle({
			x:centX,
			y:centY,
			radius:innerRadius,
			stroke:'#ccc',
			strokeWidth:4,
			dash: [10,4],//虚线
		});
		var outerCircle=new Konva.Circle({
			x:centX,
			y:centY,
			radius:outerRadius,
			stroke:'#ccc',
			strokeWidth:4,
			dash: [10,4],
		});
		bgLayer.add(innerCircle);
		bgLayer.add(outerCircle);
		//中心蓝色的圆圈
		var cenCircleText=new CircleText({
			x:centX,
			y:centY,
			innerRadius: 70,//内环的半径
			outerRadius: 88,
			innerStyle:'#525A82',
			outerStyle:'#E1E1E1',
			text:'web全栈',
		});
		cenCircleText.addToGroupOrLayer(bgLayer);
		bgLayer.draw();

		//创建动画层，这一层会运动
		var animateLayer=new Konva.Layer();
		stage.add(animateLayer);
		//第二层添加黄色和pink色的圆圈
		//2层的动画
		var L2Group=new Konva.Group({
			x:centX,//这样设置后，L2Group的中心坐标为CentX,CentY,因此CSS3的X坐标为innerRadius*……
			y:centY,
		});
		var L2_CircleText_CSS3=new CircleText({
			x:innerRadius*Math.cos(-60*Math.PI/180),
			y:innerRadius*Math.sin(-60*Math.PI/180),
			innerRadius: 30,//内环的半径
			outerRadius: 40,
			innerStyle:'orange',
			outerStyle:'#E1E1E1',
			text:'CSS3',
		});
		L2_CircleText_CSS3.addToGroupOrLayer(L2Group);
		var L2_CircleText_HTML5=new CircleText({
			x:innerRadius*Math.cos(180*Math.PI/180),
			y:innerRadius*Math.sin(180*Math.PI/180),
			innerRadius: 30,//内环的半径
			outerRadius: 40,
			innerStyle:'pink',
			outerStyle:'#E1E1E1',
			text:'HTML5',
		});
		L2_CircleText_HTML5.addToGroupOrLayer(L2Group);
		animateLayer.add(L2Group);
		//第三层的圆圈组装到一个组中
		var L3Group=new Konva.Group({
			x:centX,
			y:centY,
		});
		//第3层添加blue色的圆圈
		var L3_CircleText_JS=new CircleText({
			x:outerRadius*Math.cos(60*Math.PI/180),
			y:outerRadius*Math.sin(60*Math.PI/180),
			innerRadius: 40,//内环的半径
			outerRadius: 50,
			innerStyle:'#91BFF8',
			outerStyle:'#E1E1E1',
			text:'JS',
		});
		L3_CircleText_JS.addToGroupOrLayer(L3Group);
		//第3层添加blue色的圆圈
		var L3_CircleText_JQuery=new CircleText({
			x:outerRadius*Math.cos(240*Math.PI/180),
			y:outerRadius*Math.sin(240*Math.PI/180),
			innerRadius: 40,//内环的半径
			outerRadius: 50,
			innerStyle:'#DD7FB2',
			outerStyle:'#E1E1E1',
			text:'JQuery',
		});
		L3_CircleText_JQuery.addToGroupOrLayer(L3Group);
		animateLayer.add(L3Group);
		animateLayer.draw();

		//Konva的帧动画系统
		var rotateAnglePerSecond=60;//每秒钟旋转的角度
		var animate=new Konva.Animation(function(frame){
			//相当于setInterval;每隔一段时间执行该方法；此方法更加智能
			//计算当前帧需要旋转的角度，
			var rotateAngle=rotateAnglePerSecond*frame.timeDiff/1000;//timeDiff：两次执行的时间差；是动态变化的，根据浏览器性能变化旋转速度，上一帧和当前帧的时间差
			// var rotateAngle=2;
		    //旋转的角度;每一帧旋转的角度
		    L2Group.rotate(rotateAngle);//
		    //让2层上面的所有圆自己自我反向旋转，以便字体永远正向朝上
		    L2Group.getChildren().each(function(item,index){//获得所有子元素
		    	item.rotate(-rotateAngle);
		    });
		    L3Group.rotate(-rotateAngle);
		    L3Group.getChildren().each(function(item,index){
		    	item.rotate(rotateAngle);
		    });
		},animateLayer);//此处表示
		animate.start();
		//Konva事件系统
		animateLayer.on('mouseover',function(){
			rotateAnglePerSecond=10;
		});
		animateLayer.on('mouseout',function(){
			rotateAnglePerSecond=60;
		})
	</script>
</body>
</html>

封装的JS代码zxjwebitcast.js

function CircleText(option){
	this._init(option);
}
CircleText.prototype={
	_init:function(option){
		this.x=option.x||0;
		this.y=option.y||0;
		this.innerRadius=option.innerRadius||0;//内圆半径
		this.outerRadius=option.outerRadius||0;//圆环半径
		this.innerStyle=option.innerStyle||'red';//内部圆颜色
		this.outerStyle=option.outerStyle||'blue'//圆环颜色
		this.text=option.text||'canvas';//填充文字
                //让内圆，圆环，字体在一个组中，便于管理
		this.group=new Konva.Group({
			x:this.x,
			y:this.y,
		});
		//初始化一个内圆
		var innerCircle=new Konva.Circle({
			x:0,
			y:0,
			radius:this.innerRadius,
			fill:this.innerStyle,
			opacity:.7
		});
		this.group.add(innerCircle);
		//初始化一个圆环
		var outerRing=new Konva.Ring({
			x:0,
			y:0,
			innerRadius:this.innerRadius,
			outerRadius:this.outerRadius,
			fill:this.outerStyle,
			opacity:.4
		});
		this.group.add(outerRing);
		//初始化一个文字
		var text=new Konva.Text({
			x:0-this.outerRadius,
			y:-7,
			width:this.outerRadius*2,
			fill:'#fff',
			text:this.text,
			align:'center',
			fontSize:17,
			fontFamily: '微软雅黑',
			fontStyle:'bold'
		});
		this.group.add(text);
	},
	addToGroupOrLayer:function(arg){
		arg.add(this.group);
	}
}

吃瓜群众欢乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象封装--行星旋转案例canvas-konva.js

如图所示案例：具体讲解：在stage上面绘制一个背景层和一个运动层，背景层保持不变，运动层会随着Animation设置的而运动，而且当鼠标经过运动层的圆圈时，运动速度会明显变慢，鼠标移开后，立马恢复原来运动速度。CSS3和HTML5放入一组中，该所属组顺时针旋转，JS所属组逆时针旋转；字体随着运动，自身反向旋转便能使其永远朝上显示。html代码： webitcas
复制链接

扫一扫