canvas绘制饼状图动画

1、HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

     <title>饼状图面向对象版本</title>

     <style>

         body {

             padding: 0;

             margin: 0;

             background-color: #f0f0f0;

             overflow: hidden;

         }

     </style>

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

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

 </head>

 <body>

     <div id="container">

     </div>

     <script>

         //创建舞台

         var stage = new Konva.Stage({

             container: 'container',

             width: window.innerWidth,//全屏

             height: window.innerHeight

         });

         //创建层

         var layer = new Konva.Layer();

         stage.add(layer);

         //中心点坐标

         var cenX = stage.width() / 2;

         var cenY = stage.height() / 2;

        var data = [

             { name: "前端", value: .25, color: '#e0e'  },

             { name: "php",  value: .2,  color: 'orange'},

             { name: "UI",    value: .3,    color: 'blue'  },

             { name: "C++",    value: .05,    color: 'green' },

             { name: "游戏",    value: .1,    color: 'purple'},

             { name: "Java",    value: .1,    color: 'red'   }

         ];

         var p = new PieChart({

             x: cenX,

             y: cenY,

             r: 100,

             data: data

         });

        p.addToGroupOrLayer( layer );

        layer.draw();

        p.playAnimate();

     </script>

 </body>

 </html>

2、PieChart.js

 //英 [paɪ]  美 [paɪ]

 function PieChart( option ) {

     this._init( option );

 }

 PieChart.prototype = {

     _init: function( option ) {

         this.x = option.x || 0;

         this.y = option.y || 0;

         this.r = option.r || 0;

         this.data = option.data || [];

         //饼状图所有的 物件的组

         this.group = new Konva.Group({

             x: this.x,

             y: this.y

         });

         //饼状图：所有的 扇形的组

         this.wedgeGroup = new Konva.Group({

             x: 0,

             y: 0

         });

         //饼状图： 所有的文字的组

         this.textGroup = new Konva.Group({

             x: 0,

             y: 0

         });

         this.group.add( this.wedgeGroup );

         this.group.add( this.textGroup );

         var self = this;

         var tempAngel = -90;//从-90开始绘制

         this.data.forEach(function(item, index ) {

             //把每条数据创建成一个扇形

             var angle = 360 * item.value;//当前扇形的角度

             //创建一个扇形

             var wedge = new  Konva.Wedge({

                 x: 0,        //扇形圆心坐标

                 y: 0,

                 angle: angle ,    //扇形的角度

                 radius: self.r,    //扇形的半径

                 fill: item.color,    //扇形的填充颜色

                 rotation: tempAngel //扇形的旋转角度

             });

             self.wedgeGroup.add( wedge );

             //绘制文本的 角度

             var textAngle = tempAngel + 1/2 * angle;

             //绘制的 百分比的文本

             var text = new Konva.Text({

                 x: (self.r+20) * Math.cos(Math.PI/ 180 * textAngle ),

                 y: (self.r+20) * Math.sin(Math.PI/ 180 * textAngle ),

                 text: item.value*100 +'%',

                 fill: item.color

             });

             //根据角度判断设置文字的 位置

             if(  textAngle > 90 && textAngle < 270 ) {

                 //让文本向左边 移动文字宽度的位置。

                 text.x( text.x() - text.getWidth() );

             }

             self.textGroup.add( text );

             tempAngel += angle;

         });

         //绘制所有的楔形

         //绘制文字

         //绘制圆环的线

         var cir = new Konva.Circle({

             x: 0,

             y: 0,

             radius: this.r+10,

             stroke: '#ccc',

             strokeWidth: 2

         });

         this.group.add( cir );

         this._animateIndex = 0;

     },

     playAnimate: function() {

         var self = this;

         //根据索引显示动画

         //把所有扇区 角度设置为0

         if( this._animateIndex == 0 ) {

             //拿到所有的 扇形

             this.wedgeGroup.getChildren().each(function(item, index ){

                 item.angle(0);

             });

         }

         //展示当前索引对应的动画

          var item = this.wedgeGroup.getChildren()[this._animateIndex];

          item.to({

              angle: this.data[this._animateIndex].value * 360,

              duration: 2 * this.data[this._animateIndex].value,

              onFinish: function() {

                  self._animateIndex ++;

                  if( self._animateIndex >= self.data.length) {

                      self._animateIndex = 0;//让他的索引再回到0

                      //************************重点***********************

                      return;// 会把整个递归执行完成。

                  }

                  //继续执行当前方法，播放下一个动画

                  self.playAnimate();

              }

          });

     },

     //把饼状图添加到层里面的方法

     addToGroupOrLayer: function( arg ) {

         arg.add( this.group );

     }

 }

运行效果：

第166天：canvas绘制饼状图动画的更多相关文章

  1. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. 使用canvas绘制饼状图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Canvas(3)---绘制饼状图

    Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...

  4. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  5. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  6. canvas绘制饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

  8. IOS之以UIBezierPath绘制饼状图

    1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath*  aPath = [[UIBe ...

  9. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

随机推荐

  1. 20155231 信息安全技术概论实验二 Windows口令破解

    20155231 信息安全技术概论实验二 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验人数 每组一人 系统环境 windo ...

  2. 20155231 实验四 Android程序设计

    20155231 实验四 Android程序设计 实验要求 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事 ...

  3. 2017-2018-1 20155323《信息安全技术》实验二 Windows口令破解

    2017-2018-1 20155323<信息安全技术>实验二 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 系统环 ...

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

    20155327 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 Java的网络编程 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. ...

  5. aspnetcore 2.1 发布到树莓派3linux的艰辛路程

    发布至docker for windows. 提示: image operating system "windows" cannot be used on this platfor ...

  6. 【转载】深入理解Direct3D9

    原文:Effulgent的<深入理解Direct3D9>整理版(转) 深入理解Direct3D9 深入理解D3D9对图形程序员来说意义重大,我把以前的一些学习笔记都汇总起来,希望对朋友们有 ...

  7. 【CF833E】Caramel Clouds

    [CF833E]Caramel Clouds 题面 洛谷 题目大意: 天上有\(n\)朵云,每朵云\(i\)会在时间\([li,ri]\)出现,你有\(C\)个糖果,你可以花费\(c_i\)个糖果让云 ...

  8. cdh中hdfs非ha环境迁移Namenode与secondaryNamenode,从uc机器到阿里；

    1.停掉外部接入服务: 2 NameNode Metadata备份: 2.1 备份fsimage数据,(该操作适用HA和非HA的NameNode),使用如下命令进行备份: [root@cdh01 df ...

  9. Http协议工作特点和工作原理笔记

    工作特点: (1)B/S结构(Browser/Server,浏览器/服务器模式) (2)无状态 (3)简单快速.可使用超文本传输协议.灵活运行传输各种类型 工作原理: 客户端发送请求浏览器 -> ...

  10. 《物质世界 (Outward)》证明不必压缩制作大型角色扮演游戏的时间

    <物质世界>是一款雄心勃勃的开放世界角色扮演游戏 (RPG),设计这款游戏的公司规模只有您预期的三分之一.游戏中的一切都是动态的,拥有许多炫酷的系统设计,大家可以分屏合作掌控整个场景.参与 ...