canvas绘制圆环旋转动画——面向对象版

1、HTML

注意引入Konva.js库

 <!DOCTYPE html>

 <html lang="en">

 <head>

    <meta charset="UTF-8">

    <title>使用Konva绘制圆环旋转动画</title>

    <script src="konva/konva.min.js"></script>

    <script src="CircleText.js"></script>

 </head>

 <body>

 <div id="container">

 </div>

 <script>

    //创建舞台

    var stage=new Konva.Stage({

       container:'container',

       width:window.innerWidth,//全屏

       height:window.innerHeight

    });

    //创建层

    //中心点坐标

    var cenX=stage.width()/2;

    var cenY=stage.height()/2;

    //创建背景层

    var bgLayer=new Konva.Layer();

    stage.add(bgLayer);

    //绘制背景

    var innerRadius=252/2;//内环的半径

    var outerRadius=220;//外环的半径

    // 创建背景内环虚线圆

    var innercircle=new Konva.Circle({

       x:cenX,

       y:cenY,

       radius:innerRadius,

       stroke:"#C1C1C1", //注意是stroke 不是strokeStyle

       strokeWidth:3,

       dash:[10,4] //dash设置虚线 10实线 4空

    });

    //把 内环虚线圆添加到背景层中

    bgLayer.add(innercircle);

    //创建背景的外环的虚线圆

    var outercircle=new Konva.Circle({

       x:cenX,

       y:cenY,

       radius:outerRadius,

       stroke:"#C1C1C1", //注意是stroke 不是strokeStyle

       strokeWidth:3,

       dash:[10,4] //dash设置虚线 10实线 4空

    });

    //把外虚线圆，添加到层中。

    bgLayer.add(outercircle);

    //把中心圆形添加到层中

    var cenCircleText=new CircleText({

       x:cenX,

       y:cenY,

       innerRadius:132/2,

       outerRadius:90,

       text:'Web全栈',

       innerStyle:'#525A82',

       outerStyle:'#E1E1E1'

    });

    cenCircleText.addToGroupLayer(bgLayer);

    bgLayer.draw();//渲染层

    //动画层的绘制

    var animateLayer=new Konva.Layer();

    stage.add(animateLayer);

    //创建2环的组

    var Group2=new Konva.Group({

       x:cenX,//组内的 x，y坐标。

       y:cenY

    });

    //添加2环的圆

    //2环上的 CSS3形状组

    var CircleText_CSS3=new CircleText({

       x:innerRadius*Math.cos(30*Math.PI/180),//圆的x,y坐标

       y:innerRadius*Math.sin(30*Math.PI/180),

       innerRadius:30,   //内圆半径

       outerRadius:40,   //外圆的半径

       innerStyle:'yellow', //内圆填充的颜色

       outerStyle:'#E1E1E1',   //外圆环填充的颜色

       text:'CSS3'

    });

    CircleText_CSS3.addToGroupLayer(Group2);

    //添加2环的圆

    //2环上HTML5的圆形组

    var CircleText_HTML5=new CircleText({

       x:innerRadius*Math.cos(240*Math.PI/180),//文本圆的x坐标

       y:innerRadius*Math.sin(240*Math.PI/180),//文本圆的y坐标

       innerRadius:30,         // 内圆半径

       outerRadius:40,         // 外圆半径

       innerStyle:'orange',    //内部填充样式

       outerStyle:'#E1E1E1',   //外圆的样式

       text:'HTML5'            // 内圆的文本

    });

    CircleText_HTML5.addToGroupLayer(Group2);

    //添加2环的圆

    //2环上js的圆形组

    var CircleText_js=new CircleText({

       x:innerRadius*Math.cos(150*Math.PI/180),

       y:innerRadius*Math.sin(150*Math.PI/180),

       innerRadius:35,

       outerRadius:45,

       innerStyle:'green',

       outerStyle:'#E1E1E1',

       text:'Javascript'

    });

    CircleText_js.addToGroupLayer(Group2);

    animateLayer.add(Group2);//第二层的组添加到层上

    //创建3环的的组

    var Group3=new Konva.Group({

       x:cenX,

       y:cenY

    });

    //绘制3环圆

    var CircleText_vue=new CircleText({

       x:outerRadius*Math.cos(90*Math.PI/180),

       y:outerRadius*Math.sin(90*Math.PI/180),

       innerRadius:40,

       outerRadius:50,

       innerStyle:'blue',

       outerStyle:'#E1E1E1',

       text:'vue'

    });

    CircleText_vue.addToGroupLayer(Group3);

    var CircleText_bs=new CircleText({

       x:outerRadius*Math.cos(200*Math.PI/180),

       y:outerRadius*Math.sin(200*Math.PI/180),

       innerRadius:45,

       outerRadius:55,

       innerStyle:'#E92322',

       outerStyle:'#E1E1E1',

       text:'Bootstrap'

    });

    CircleText_bs.addToGroupLayer(Group3);

    var CircleText_jq=new CircleText({

       x:outerRadius*Math.cos(30*Math.PI/180),

       y:outerRadius*Math.sin(30*Math.PI/180),

       innerRadius:35,

       outerRadius:45,

       innerStyle:'#A735D8',

       outerStyle:'#E1E1E1',

       text:'jQuery'

    });

    CircleText_jq.addToGroupLayer(Group3);

    animateLayer.add(Group3);//3环的组添加到层上

    animateLayer.draw();

    var rotateAnglPerSecond=60;////每秒钟设置旋转60

    //Konva帧动画系统

    var animate=new Konva.Animation(

       function(frame){

          //每隔一会执行此方法，类似 setInterval

          //timeDiff: 两帧之间时间差。是变化的，根据电脑性能和浏览器的状态动态变化。

          //计算 当前帧需要旋转的角度。

         var rotateAngle=rotateAnglPerSecond*frame.timeDiff/1000;//上一帧到当前帧的时间差 毫秒

          Group2.rotate(rotateAngle);// 不是弧度，是角度

          //获得二环上圆的内部组进行反向旋转

          Group2.getChildren().each(function(item,index){

             item.rotate(-rotateAngle);

          });

          //3环逆旋转

          Group3.rotate(-rotateAngle);

          //获得三环上圆的内部组进行反向旋转

          Group3.getChildren().each(function(item,index){

             item.rotate(rotateAngle);

          });

       },animateLayer);

    animate.start();//启动动画

    //Konva 事件系统

    //给动画层绑定一个鼠标移上去的事件

    animateLayer.on('mouseover',function(){

       //设置旋转角度

       rotateAnglPerSecond=10;//设置旋转的角度为10度，旋转变慢。

    });

    //给动画层绑定 mouseout离开的事件。

    animateLayer.on('mouseout',function(){

       //当鼠标移开的时候，旋转加快

       rotateAnglPerSecond=60;//设置旋转角度为60度，旋转变快

    });

 </script>

 </body>

 </html>

2、CircleText.js

 /**

  * Created by Administrator on 2018/2/1.

  */

 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.text=option.text||'canvas';        //圆内的文字

         this.innerStyle=option.innerStyle||'red'; //内圆的填充样式

         this.outerStyle=option.outerStyle||'blue';//外圆的填充样式

         //创建文字和圆形的一个组

         this.group=new Konva.Group({

             x:this.x,//设置组的x，y坐标后，所有的内部元素按照组内的新坐标系定位。

             y:this.y

         });

         //初始化一个内部圆

         var innerCircle=new Konva.Circle({ //创建一个圆

             x:0,

             y:0,

             radius:this.innerRadius, //圆的半径

             fill:this.innerStyle,    //圆的填充颜色

             opacity:.8

         });

         //把内部圆，添加到组内

         this.group.add(innerCircle);

         //初始化一个圆环

         var outerRing=new Konva.Ring({//初始化一个圆环

             x:0,

             y:0,

             innerRadius:this.innerRadius,   //内圆的半径

             outerRadius:this.outerRadius,   //外圆的半径

             fill:this.outerStyle,           //圆环的填充的样式

             opacity:.3                      //透明度

         });

         //把外环，添加到组内

         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' , //居中显示

             fontStyle: 'bold'//字体加粗

         });

         //把文字添加到组内

         this.group.add(text);

         },

     //把 组添加到层或者其他组中。

     addToGroupLayer:function(arg){

         arg.add(this.group);

     }

     }

运行效果：

第165天：canvas绘制圆环旋转动画的更多相关文章

  1. canvas绘制折线路径动画

    最近有读者加我微信咨询这个问题: 其中的效果是一个折线路径动画效果,如下图所示: 要实现以上路径动画,一般可以使用svg的动画功能.或者使用canvas绘制,结合路径数学计算来实现. 如果用canva ...

  2. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  3. canvas绘制圆环

  4. canvas实现有递增动画的环形进度条

    哈?标题不知道啥意思? 老规矩,直接看图! 效果如下: 高清大图! 码农多年,老眼昏花,动图看不清?!那就看静态截图!!! 不同分值效果如下:          看完了卖家秀,我们来看产品的制作过程吧 ...

  5. android旋转动画和平移动画具体解释，补充说一下假设制作gif动画放到csdn博客上

    先上效果图: 我这里用的是GifCam来制作的gif动画,能够在http://download.csdn.net/detail/baidu_nod/7628461下载, 制作过程是先起一个模拟器,然后 ...

  6. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  7. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  8. canvas 绘制动态圆环进度条

    由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_e ...

  9. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

随机推荐

  1. Flex4中的拖动技术

    下面列一个最简单的例子,在Flex中,拖动原来如此简单 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?xm ...

  2. 20155321 2016-2017-2《Java程序设计》课程总结

    20155321 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:我期望的师生关系 预备作业2:学习情况的相关调查 预备作业3:安装虚拟机以及学习Linu ...

  3. 20155327 2016-2017-3 《Java程序设计》第4周学习总结

    20155327 2016-2017-3 <Java程序设计>第4周学习总结 教材学习内容总结 一. 理解封装.继承.多态的关系 封装:把客观事物封装成抽象的类,并且类可以把自己的数据和方 ...

  4. 20145226夏艺华 网络对抗技术EXP8 WEB基础实践

    20145226夏艺华 网络对抗技术EXP8 WEB基础实践 实验问题回答 1.什么是表单? 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CG ...

  5. apache开启伪静态的方法 php篇

    打开apache的配置文件httpd.conf 找到 #LoadModule rewrite_module modules/mod_rewrite.so 把前面#去掉.没有则添加,但必选独占一行,使a ...

  6. 八、EnterpriseFrameWork框架基础功能之自定义报表

    本章写关于框架中的“自定义报表”,类似上章“字典管理”也是三部分功能组成,包括配置报表.对报表按角色授权.查看报表:其核心思想就是实现新增一个报表而不用修改程序代码.不用升级,只需要编写一个存储过程, ...

  7. halcon中关于文本的创建以及写入

    原文链接:http://blog.sina.com.cn/s/blog_61cc743001017nxr.html#FileName 1.open_file( : : FileName, FileTy ...

  8. 【数据结构系列】线段树(Segment Tree)

    一.线段树的定义 线段树,又名区间树,是一种二叉搜索树. 那么问题来了,啥是二叉搜索树呢? 对于一棵二叉树,若满足: ①它的左子树不空,则左子树上所有结点的值均小于它的根结点的值 ②若它的右子树不空, ...

  9. Qt类继承关系图

    分享两个资源,对于系统了解Qt框架的整体脉络很有帮助. Qt4类关系图+Qt5类关系图,PDF+JPG格式 [下载] Qt5类关系图(基于Qt5.1版),JPG格式[下载]

  10. “Hello World!“”团队第五周召开的第二次会议

    今天是我们团队“Hello World!”团队第五周召开的第二次会议.也祝大家双十一快乐~~博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七 ...