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. 20155218 2016-2017-2《Java程序设计》课程总结

    20155218 2016-2017-2<Java程序设计>课程总结 目录 每周作业链接汇总 实验报告链接汇总 博客中的经验与收获 代码托管 课堂项目实践 课程收获与不足 给开学初的你和学 ...

  2. class kind type sort区别

    class多用于 级别比如高级货就是 first class,primary class等等,以此类推kind 和sort 基本一样,就像你说的,译为 种类,what kind of疑问,回答时用so ...

  3. Java集合——LinkedList源码详解

    )LinkedList直接继承于AbstractSequentialList,同时实现了List接口,也实现了Deque接口. AbstractSequentialList为顺序访问的数据存储结构提供 ...

  4. day 2 异常传递 ，抛出

    1.异常的传递 def test1(): print("---test1--") print(num) print('---test1 over---') def test2(): ...

  5. 实时备份工具之inotify+rsync

    1.inotify简介 inotify 是一个从 2.6.13 内核开始,对 Linux 文件系统进行高效率.细粒度.异步地监控机制, 用于通知用户空间程序的文件系统变化.可利用它对用户空间进行安全. ...

  6. 在腾讯云上安装mysql遇到的问题

    卸载mysql: 1.sudo apt-get autoremove --purge mysql-server-5.5 5.5 是数据库版本, mysql -v 显示版本信息 2.sudo apt-g ...

  7. 180725-InfluxDB-v1.6.0安装和简单使用小结

    InfluxDB安装和简单使用小结 InfluxDB是一个时序性数据库,因为工作需求,安装后使用测试下是否支持大数据下的业务场景 说明: 安装最新版本 v1.6.0 集群版本要收费,单机版本免费 内部 ...

  8. Jmeter4.0安装

    1.检查安装环境 1.1 JDK要求 JDK版本:1.8 1.2 检查是否安装JDK win + R 快捷键打开运行,输入 cmd 打开面板,在面板中输入 java -version,出现如下信息,即 ...

  9. 03-运行第一个docker容器

    环境选择 容器需要管理工具.runtime 和操作系统,我们的选择如下: 1.管理工具 - Docker Engine因为 Docker 最流行使用最广泛. 2.runtime - runc Dock ...

  10. HTML从入门到放弃

    一.HTML 简介 链接:https://www.cnblogs.com/baishuchao/articles/9179920.html 二.HTML 基础 链接:https://www.cnblo ...