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. 20155226 2016-2017-2 《Java程序设计》第3周学习总结

    20155226 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 认识对象 类类型 Java可区分为基本类型和类类型两大类型系统,其中类类型也称为参考类型.s ...

  2. lamp环境搭建（centos6.9+apache2.4+mysql5.7+php7.1）

    lamp环境搭建(centos6.9+apache2.4+mysql5.7+php7.1) 安装前准备:CentOS 6.9 64位 最小化安装 yum install -y make gcc gcc ...

  3. day3 直方图

    1.绘制直方图 # coding=utf-8 import cv2 import numpy as np from matplotlib import pyplot as plt img1 = cv2 ...

  4. OpenStack入门篇（一）之云计算的概念

    1.云计算 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少 ...

  5. [flex 布局]——flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  6. QML和JS引擎的关系以及调用c++函数的原理

    首先推荐几篇博客 1.深入解析QML引擎, 第1部分:QML文件加载 https://www.cnblogs.com/wzxNote/p/10569535.html 2.深入解析QML引擎, 第2部分 ...

  7. MyBatis.Net 配置

    假设我们现在有这样的需求,要对学生信息进行管理 学生表有要以下要求 字段名称 数据类型 说明 stuNo 字符 学号,该列必填,为主键递增 stuName 字符 学生姓名,该列必填,要考虑姓氏可能是两 ...

  8. Jenkins+git+Nginx

    1.Jenkins 一.tomcat安装 1.下载JDK和Tomcat //通过wget下载 wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomca ...

  9. TW实习日记：第八天

    今天早上主要是接着做昨天的微信端网页预览附件,听同事说当打包代码放入服务器上后,就不存在跨域问题了,也就懒得自己写接口了,那么就希望自己能一次过吧...结果写着写着,发现开发文档中关于预览文件的方法, ...

  10. throttle(节流)和debounce(防抖)

    防抖和节流都是用来控制频繁调用的问题,但是这两种的应用场景是有区别的. throttle(节流) 有一个调用周期,在一个很长的时间里分为多段,每一段执行一次.例如onscroll,resize,500 ...