文档章节

Canvas-04-炫酷效果

wei0925
 wei0925
发布于 2017/07/04 22:23
字数 642
阅读 5
收藏 0

#Canvas-04-炫酷效果 输入图片说明

##代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0; } </style> </head> <body> <div id="box"></div> <script src="./konva.js"></script> <script> var stage = new Konva.Stage({ container:"box", width:window.innerWidth, height:window.innerHeight });

			//定义变量
			var cx = window.innerWidth/2;
			var cy = window.innerHeight/2;
			var bigRadius = 240;
			var middleRadius = 160;
			var centerRadius = 80;


			//创建背景层
			var bgLayer = new Konva.Layer();
			stage.add(bgLayer);


			//大圈
			var bigCircle = new Konva.Circle({
				x:cx,
				y:cy,
				radius:bigRadius,
				stroke:"#ccc",
				dash:[10,2]
			});
			bgLayer.add(bigCircle);

			//中圈
			var middleCircle = new Konva.Circle({
				x:cx,
				y:cy,
				radius:middleRadius,
				stroke:"#ccc",
				dash:[10,2]
			});
			bgLayer.add(middleCircle);

			//中心
			var centerCircle = new CircleText({
				x:cx,
				y:cy,
				innerRadius:centerRadius,
				outerRadius:centerRadius+30,
				innerFill:"#369",
				outerFill:"#ddd",
				text:"WEB前端",
				fontSize:18,
				fontWeight:"bold",
				fontFill:"#fff",
				fontX:-35,
				fontY:-9

			});
			bgLayer.add(centerCircle);

			
			bgLayer.draw();



			//创建动画层
			var layer = new Konva.Layer();
			stage.add(layer);

			//最外圈的小球
			var bigCircleData = [
				{
					innerRadius:40,
					outerRadius:50,
					innerFill:"#5cb85c",
					outerFill:"#ddd",
					text:"HTML5",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				},
				{
					innerRadius:40,
					outerRadius:50,
					innerFill:"#5bc0de",
					outerFill:"#ddd",
					text:"CSS3",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				},
				{
					innerRadius:40,
					outerRadius:50,
					innerFill:"#f0ad4e",
					outerFill:"#ddd",
					text:"ECMA6",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				},
				{
					innerRadius:40,
					outerRadius:50,
					innerFill:"#d9534f",
					outerFill:"#ddd",
					text:"jQuery",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				},
				{
					innerRadius:40,
					outerRadius:50,
					innerFill:"#428bca",
					outerFill:"#ddd",
					text:"NodeJS",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				}
			];


			//创建一个组
			var bigCircleGroup = new Konva.Group({
				x:cx,
				y:cy
			});
			layer.add(bigCircleGroup); //把组添加到层中


			var angle = 0;
			var angleDiff = 360 / bigCircleData.length;

			bigCircleData.forEach(function(option, index){
				
				option.x = Math.cos(angle / 180 * Math.PI) * bigRadius;
				option.y = Math.sin(angle / 180 * Math.PI) * bigRadius;
				var circleText = new CircleText(option);

				bigCircleGroup.add(circleText); //添加到组中

				angle += angleDiff;

			});



			//绘制 中间圈的小球
			//定义数据
			var middleCircleData = [
				{
					innerRadius:30,
					outerRadius:40,
					innerFill:"purple",
					outerFill:"#ddd",
					text:"VueJS",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				},
				{
					innerRadius:30,
					outerRadius:40,
					innerFill:"pink",
					outerFill:"#ddd",
					text:"Angle",
					fontSize:14,
					fontX:-20,
					fontY:-7,
					opacity:.7
				}
			]

			//创建组
			var middleCircleGroup = new Konva.Group({
				x:cx,
				y:cy
			});
			layer.add(middleCircleGroup);

			//添加小圆圈
			var angle1 = 0;
			var angleDiff1 = 360 / middleCircleData.length;

			middleCircleData.forEach(function(option, index){
				
				option.x = Math.cos(angle1 / 180 * Math.PI) * middleRadius;
				option.y = Math.sin(angle1 / 180 * Math.PI) * middleRadius;
				var circleText = new CircleText(option);

				middleCircleGroup.add(circleText); //添加到组中

				angle1 += angleDiff1;

			});




			layer.draw();


			//两个圈 要转
			var angleSpeed = 60; //每秒钟转的角度
			var animation = new Konva.Animation(function(frame){
				var angleDiff = angleSpeed * frame.timeDiff / 1000;
				//外圈转动
				bigCircleGroup.rotate(angleDiff);
				bigCircleGroup.getChildren().each(function(val, index){
					val.rotate(-angleDiff);
				}) 

				//内圈转动
				middleCircleGroup.rotate(-angleDiff);
				middleCircleGroup.getChildren().each(function(val, index){
					val.rotate(angleDiff);
				}) 

			}, layer);
			animation.start();


			//事件
			bigCircleGroup.on("mouseenter", function(){
				angleSpeed = 10;
			}).on("mouseleave touchend", function(){
				angleSpeed = 60;
			})


			/**
	         * 生成带文字的双层圆
			*/
			function CircleText(options) {
				//配置项
				options = options || {};
				options.x = options.x || 0;
				options.y = options.y || 0;
				options.innerRadius = options.innerRadius || 0;
				options.outerRadius = options.outerRadius || 0;
				options.innerFill = options.innerFill || "red";
				options.outerFill = options.outerFill || "#ddd";
				options.text = options.text || "小萍萍";
				options.fontFill = options.fontFill || "#fff";
				options.fontSize = options.fontSize || 16;
				options.fontWeight = options.fontWeight || "normal";
				options.fontFamily = options.fontFamily || "MicrosoftYaHei";
				options.fontX = options.fontX || 0;
				options.fontY = options.fontY || 0;
				options.opacity = options.opacity || 1;

				//创建组
				var group = new Konva.Group({
					x:options.x,
					y:options.y
				})

				//最中心的实心圆
				var circle = new Konva.Circle({
					x:0,
					y:0,
					radius:options.innerRadius,
					fill:options.innerFill
				});
				group.add(circle);

				//空心圆 圆环
				var ring = new Konva.Ring({
					x:0,
					y:0,
					innerRadius:options.innerRadius,
					outerRadius:options.outerRadius,
					fill:options.outerFill
				});
				group.add(ring);

				//文字
				var text = new Konva.Text({
					x:options.fontX,
					y:options.fontY,
					text:options.text,
					fill:options.fontFill,
					fontSize:options.fontSize,
					fontFamily:options.fontFamily,
					fontWeight:options.fontWeight
				});
				group.add(text);


				return group;


			}
		</script>
	</body>
	</html>

© 著作权归作者所有

上一篇: Canvas-04-饼状图
下一篇: Canvas-04-Konva
wei0925
粉丝 2
博文 15
码字总数 17278
作品 0
温州
程序员
私信 提问
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
0
0
程序猿必备的8款web前端SVG动画特效

  1、SVG图片波浪效果渲染动画   今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的...

爱前端
2017/12/06
0
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0
Canvas案例-炫酷的数字时钟

引言 本人第一次发帖,有什么不妥之处还望大家包涵(有什么想法或者意见都可以在评论区留言),好了废话不多说,看下我要介绍的东西。 案例介绍 炫酷的数字时钟,使用canvas绘制,这个案例来...

hans0000
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

蚂蚁区块链BaaS:开放在云端,落地于实体

自 2018 年 6 月上线以来,蚂蚁区块链 BaaS 不断在技术上实现突破,形成自身独特的优势,并做为行业领军者在不同领域的几十个场景实现落地。在区块链的商用时代加速到来之际,通过开放自身的...

阿里云官方博客
35分钟前
3
0
Idea cannot access【好使】

Idea中无法访问类中public方法。。 解决: idea点击左下角电脑图标,打开右边栏各种功能键 右边栏Maven Projects中点一下刷新,就是那个两个蓝的箭头组成的环 ----------------------------...

Airship
35分钟前
3
0
Spark内置图像数据源初探

作者:林武康,花名知瑕, 阿里巴巴计算平台事业部EMR团队的高级开发工程师,Apache HUE Contributor, 参与了多个开源项目的研发工作,对于分布式系统设计应用有较丰富的经验,目前主要专注于...

阿里云云栖社区
36分钟前
1
0
【面试被虐】游戏中的敏感词过滤是如何实现的?

小秋今天去面试了,面试官问了一个与敏感词过滤算法相关的问题,然而小秋对敏感词过滤算法一点也没听说过。于是,有了以下事情的发生….. 面试官开怼 面试官:玩过王者荣耀吧?了解过敏感词过...

爱编程的浪子
39分钟前
4
0
springboot之maven属性引入

<plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId><version>2.7</version><configuration><delimiters><delimite......

Online_Reus
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部