HTML5画布canvas实战(2)--饼状图

画布

HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成 canvas 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

福利广告

以前画画能把猪画成四不像，现在入门学了画布后，觉得自己已经是米开朗基罗级别的画家，从此走向人生的巅峰…后来获取上下文(CanvasRenderingContext2D)，绘制工具箱，一步一步走向了人生的盆地…画布的CanvasRenderingContext2D如马良的神笔，但是还是要花费一番心血学习它，才能从一棵葱发展成为一颗参天大葱…做个有理想的葱

饼状图

技术分析

1. 使用arc()来画我们的圆

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

2. 使用fillRect()来填充正方形

void ctx.fillRect(x, y, width, height);

3. 使用fillText()绘制文本

在 (x, y)位置填充文本(text)的方法。如果选项的第四个参数提供了最大宽度(maxWidth)，文本会进行缩放以适应最大宽度。

4. 使用Math.random()获取随机颜色

HTML结构

    <style>
        canvas{
   
            display: block;
            margin: 10px auto;
            border: 1px solid #000;
        }
    </style>
<canvas width="600" height="400"></canvas>

使用构造函数初始化饼图的一些变量

    function PieChart(cxt){
   
        // 1.1 获取上下文
        this.myCan = document.querySelector('canvas')
        this.cxt = cxt || this.myCan.getContext('2d')
        // 1.2 获取画布的宽高
        this.w = this.cxt.canvas.width
        this.h = this.cxt.canvas.height
        // 1.3 获取饼状图的圆心
        this.x = this.w/2 + 30
        this.y = this.h/2
        // 1.4 定义饼状图的半径
        this.r = 150
        this.line = 20
        // 1.5 初始化矩形长宽
        this.rectW = 30
        this.rectH = 15
        // 1.6 初始化矩形距离坐上的距离
        this.rectL = 10
        this.rectT = 6
    }

使用闭包来产生一个区域内的随机数

    PieChart.prototype.ranNum = function (min,max) {
   
        return function () {
   
            return parseInt(Math.random()*(max-min+1)+min)
        }
    }

实现随机颜色

因为r,g,b颜色的区间是[0,255],所以我们直接作为参数

    PieChart.prototype.ranColor = function () {
   
         this.color = this.ranNum(0,255)
         return `rgb(${
     this.color()},${
     this.color()},${
     this.color()})`
    }

给一个模拟数据方便我们画圆

    var data = [
        {
   
            title: '不及格人数',
            num: 6
        },
        {
   
            title: '刚好及格',
            num: 30
        },
        {
   
            title: '良好',
            num: 10
        },
        {
   
            title: '优秀',
            num: 8
        }
    ];

绘制左上方第n个矩形和其文字

我们在构造函数已经定义好矩形的长rectW宽rectW间隔距离rectT，str是文本内容，n代表矩形的序列，rectColor矩形颜色

    PieChart.prototype.drawRect = function(str,n