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. 20155222卢梓杰 《Java程序设计》第1周学习总结

    20155222 <Java程序设计>第1周学习总结 教材学习内容总结 JDK是一个工具程序,包括了JAVA程序语言,工具程序与JRE,JRE包括了部署技术,JAVA SE API 与 J ...

  2. 暗通道去雾算法的python实现

    何凯明博士的去雾文章和算法实现已经漫天飞了,我今天也就不啰里啰唆,直接给出自己python实现的完整版本,全部才60多行代码,简单易懂,并有简要注释,去雾效果也很不错. 在这个python版本中,计算 ...

  3. charles录制https请求

    之前一直用windows系统,抓包什么的都是用的fiddler或者wireshark,操作比较简单,扩展性也比较强,现在因为工作原因换了mac,在网上一直没有找到fiddler的mac版本,就只能切换 ...

  4. 【redis的搭建】centos6.4下搭建redis

    说明:本文内容参考自一些资料,如有雷同,还请见谅. 部分参考: http://blog.csdn.net/su377486/article/details/51803616 http://blog.c ...

  5. 四、Django设置相关

    1.全局设置 setttings文件 import os import sys # Build paths inside the project like this: os.path.join(BAS ...

  6. 质造未来，首届腾讯WeTest技术交流开放日成功举办

    WeTest 导读 北京时间12月21日下午1点整,2018年度腾讯WeTest技术交流开放日在上海举办.盛大.巨人.电魂.bilibili.方趣等十余家来自不同优秀企业的测试技术负责人均来到现场,共 ...

  7. 用Micro:bit做浇灌系统

    利用Micro:bit结合[土壤湿度感测棒]做一个简单的浇灌系统 一.测试土壤湿度感测棒 •材料:土壤湿度感测棒 (万能的淘宝上可以找到) •连接:将[土壤湿度感测棒]的一端接P0.另一端接GND 简 ...

  8. Windows下使用Python的Curses库时 No module named _curses问题

    这个问题产生的 根本原因 是 curses 库不支持 windows.所以我们在下载完成python后(python 是自带 curses 库的),虽然在  python目录\Lib  中可以看到 c ...

  9. Qt-QMl-自定义自己想要的TabView

    上效果图 上实现源码,这里的代码都是来自Qt官方源码修改其中某一行内容 /* 作者:张建伟 时间:2018年4月8日 简述:自定义TabView,主要实现Tab和实现内容重叠,不在占用独立空间 该文件 ...

  10. python登录验证码生成及自动化测试规避

    在用django写论坛的时候,需要有登录及注册功能. 故就登录界面后端需要生成随机验证码并传值给前端的代码进行编写如下. 验证码生成png需要调用到python的图形库 生成注册码img import ...