canvas-第二天01部分

1.饼图

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="demoCanvas" width="500" height="500" >
        <p>你的浏览器不支持Canvas</p>
    </canvas>
    <script src="./script/pie.js" ></script>
    <script>
        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        let pie = new Pie(200, 200, 80, [10,30,50,60,20]);
        pie.draw();
    </script>
</body>
</html>

JS代码

/**
 * Created by yudehai on 2018/12/28.
 */
(function (w) {

    /*将角度转换为弧度*/
    function  angleToRidian( angle ) {
        return Math.PI / 180 * angle;
    }

    /*混入式继承*/
    function extend( o1, o2) {
        for(let  key in o2){
            if(o2.hasOwnProperty(key)){
                o1[key] = o2[key];//只有o2自己的属性才会copy到o1身上
            }
        }
    }

    /**
     * constructor: { pie } 饼图构造函数
     * param { x:number } 圆心x轴坐标
     * param { y:number } 圆心y轴坐标
     * param { r:number } 圆半径
     * param { data:array } 绘制饼图所需的数据
     */
    function Pie( x, y, r, data) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.data = data;
        this.colors = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];
    }
    //给原型扩充方法
    extend(Pie.prototype, {
        draw: function () {
            var self = this;

            //数据的总和
            var num = 0;
            this.data.forEach(function(val){
                num += val;
            });
            //一个数据值所占用的角度
            var baseAngle = 360 / num;

            //假设已开始就绘制了一个起初为零，结束为零的扇形
            var startAngle = 0,
                endAngle = 0;

            //画扇型
            this.data.forEach(function (val, i) {
                //每次进来时计算当前扇形的起始角度和结束角度
                //下一个扇形的起始角度是当前扇形的结束角度
                startAngle = endAngle;
                //这个结束角度 = 上一个扇形的结束角度+当前所对应的角度
                endAngle = endAngle +baseAngle * val;

                //第一个扇形
                pencil.beginPath();
                pencil.moveTo(self.x, self.y);
                pencil.arc(self.x, self.y, self.r, angleToRidian(startAngle), angleToRidian(endAngle));
                pencil.closePath();
                pencil.fillStyle = self.colors[i];
                pencil.fill();
            })

        }
    });
    //把构造函数暴露到全局
    w.Pie = Pie;

}(window));

canvas-第二天01部分

猜你喜欢