canvas使用，canvas绘制饼状图

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

1.canvas简单使用

1.1先看我们的html，需要一个绘图的区域

<canvas id="drawing" width="500px" height="500px"></canvas>

1.2获取绘图区域，并且判断浏览器是否支持canvas绘图

var drawing = document.getElementById('drawing')//获取绘图区域
if(drawing.getContext){
     context = drawing.getContext('2d')
}else{
　　alert（'浏览器不支持canvas'）
}

1.3介绍简单的api（这里的context指的是上面获取的绘图区域）

　　context.beginPath() 绘图开始，一个图可以分多次绘制，例如饼状图每个小部分都是一次完整的绘制，为了填充不同颜色，都需要多次开始和结束

　　context.closePath() 本部分绘制结束

　　context.moveTo(100,100) 抬笔移动到100,100位置，过程中不留下痕迹

　　context.lineTo(100,100) 从某个起点绘制到100,100这个坐标的，

　　context.fill() 开始填充，可以先设置填充颜色，context.fillStyle = 'blue';设置填充色，然后在调用context.fill()开始填充本部分

　　context.stroke() 描边，就是轮廓的颜色，可以先设置颜色，context.strokeStyle="red"，然后调用context.stroke()描边

2.开始我们的封装绘制方法

2.1开始封装绘制方法

/*下列插件传递json的格式{
　　　　　ele:ele   
 　　　　data:[1,2,3,4]
    }*/
    function Circle(json) {
        this.ele = json.ele;//绘制区域元素
        this.data = json.data;//输入的数据
        this.step = 0;//绘制的步骤，几个数据，分几次绘制
        this.start=0;//其实位置初始化
        this.end = 0;//借宿位置初始化
        this.init(); //调用初始化方法

    }
    Circle.prototype.init=function(){
        if(this.ele.getContext){ //判断知否支持canvas
            this.context = this.ele.getContext('2d')
        }else{
            console.log('不支持canvas')
        }
        this.sum() //先统计数据和，以便得到每个数据的占比
        this.drawing() //开始绘制
    }
    Circle.prototype.drawing=function(){
        if(this.step >= this.data.length){//超过数据个数，就停止绘制
            return
        }
        this.math()//计算起点和终点
        this.context.beginPath();//绘制开始
        this.context.fillStyle = Circle.prototype.color();//填充颜色
        this.context.moveTo(250,250)//绘制起点移动到的位置，moveTo就像抬笔到某处，过程中不留下痕迹
        this.context.arc(250,250,160,this.start,this.end,false)//画圆开始，属性分别是('圆心X轴坐标','原型Y轴坐标','起点','终点',是否逆时针)


        this.context.lineTo(250,250)//再绘制直线到圆心，这样形成封闭区域，才可以填充颜色
        this.context.fill()//填充颜色
        this.context.closePath();//关闭绘图
        this.step++;//接着下一步骤的绘制
        this.drawing()

    }
    Circle.prototype.math = function(start,end){//每次绘制是计算起点和终点
        this.start=this.end;
        this.end = this.start+this.data[this.step]/this.total*2*Math.PI;
        
    }
    Circle.prototype.color=function(){//随机颜色的生成
        var color="#";
        for(var i = 0;i < 6;i++){
            color+= parseInt(Math.random()*17).toString(16);
        }
        return color;
    }
    Circle.prototype.sum = function(){//得到数据的总和，以便得到每个数据的占比
        this.total = this.data.reduce(function(a, b){ 
            return a + b; 
        });
    }

2.2调用方法

var drawing = document.getElementById('drawing')
var img =new Circle({
      ele:drawing,
      data:[1,2,3,4]
})

2.3查看效果图，（因为我们的填充颜色是随机的，所以每次刷新的饼状图每部分的颜色都会变化）

jquery ui 饼状图 canvas饼状图_jquery ui 饼状图

我的源码地址在 https://github.com/jiangzhenfei/canvas/blob/master/circle.html