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. 推荐一个学习Flex chart的好网站

    推荐一个学习Flex chart的好网站 2013-03-04 14:16:56|  分类: Flex |  标签: |字号大中小 订阅     推荐一个学习Flex chart的好网站 最近在做一个 ...

  2. 小议linux

    小议linux在虚拟机上的安装和命令行 如何解决intel-vt-x被禁用而无法正常安装虚拟机 一般在新的电脑上第一次安装虚拟都可能出现如下图的问题:intel-vt-x(intel Virtuali ...

  3. 20155301 Makefile和MyOD和共享库

    20155301 Makefile和MyOD和共享库 Makefile 作用:make命令执行时,需要一个 Makefile 文件,以告诉make命令需要怎么样的去编译和链接程序. 我们要写一个Mak ...

  4. 20155306 2016-2017-2 《Java程序设计》第十周学习总结

    20155306 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 Java和Android开发学习(网络) 网络概览 计算机网络体系结构的通信协议划分为七层, ...

  5. 20155307 2017-2018-3 《Java程序设计》第3周学习总结

    20155307 2017-2018-3 <Java程序设计>第3周学习总结 教材学习内容总结 类相当于是设计图,对象是根据类设计出来的.用class定义,名字叫clothes.可以用ne ...

  6. IDEA 运行报错 failed to create a child event loop

    背景 在IDEA中写了测试代码,但是运行的时候一直提示 java.lang.IllegalStateException: failed to create a child event loop ... ...

  7. day 4 继承

    1.继承引入,减少代码量 1)版本1: class Animal: '''定义一个动物类''' def eat(self): print("----吃----") def drin ...

  8. ubuntu的学习教程(常用操作)

    摘要 最近在学习linux,把自己学习过程中遇到的常用操作以及一些有助于理解的内容记录下来.我主要用的是ubuntu系统 命令提示符 '~' 这个是指用户的家目录,用户分为root用户和普通用户,ro ...

  9. postgresql parallel join example

    CREATE TABLE public.pgbench_accounts_bak ( aid integer NOT NULL, bid integer, abalance integer, fill ...

  10. TPO 02 - The Origins of Cetaceans

    TPO 02 - The Origins of Cetaceans It should be obvious that cetaceans[n. 鲸目动物]-whales, porpoises [n. ...