简单易学--用canvas画一个饼状图

html5新增的canvas标签允许脚本语言动态渲染位图像,在基于Web的图像显示方面比Flash更加立体，也更加精巧.现在我们先来用canvas标签实现一个简单的饼状图.

最终效果图:

cake.jpg

• 基础
  canvas标签本身不具有绘图功能,我们必须借助js在网页上绘制图像,所以我们在html中添加一个canvas标签,并加上一个id值,以便我们能够获取这个标签做下一步操作:

html:
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">你
的浏览器不支持canvas,请升级浏览器.(浏览器不支持，显示此行文本)</canvas>
.................................................................................
<script>
    //1.获取canvas标签
    var canvas = document.getElementById('canvas');
    //2.获取上下文(当前是2d)
    var ctx = canvas.getContext('2d');
</script>

几个注意点:
①canvas是一张画布,本身没有内容.我们需要用js代码在上面''画画'';
②画布的大小必须是如上的行内设置width和height属性,不能使用css设置画布的大小(css设置会使画布拉升,使得我们得不到对应像素的图片,画出的图片也会变形);
③js获取canvas标签之后,需要先初始化一个执行环境canvas.getContext('2d')是画2d图片,canvas.getContext('webgl')为3d图片,所有的线条图片都是基于这个'ctx'环境来画的;
④canvas只兼容ie9及以上版本浏览器,所以要在标签中设置版本不兼容提示语句.

• 画弧(圆)准备工作
  ctx.beginPath():开始一段新路径(告诉浏览器要开始画画了);
  ctx.moveTo():绘制的初始位置;
  ctx.lineWidth:绘制线条宽度;
  ctx.strokeStyle:绘制线条颜色(color值);
  ctx.fillStyle:图块填充颜色(color值);
  ctx.fill():执行图块填充(需放在所有属性设置的后面);
  ctx.stroke():执行绘制(需放在所有属性设置的后面);
  Math.PI: 数学中的π弧度(换算公式deg*Math.PI/180);
  ctx.font:绘制文字设置字号,字体;
  ctx.fillText(text, textX, textY):文字内容与位置设置;
  ctx.arc(x0,y0,r,beginAngel,endAngel,counterclockwise):弧的一些属性设置;

x0:圆心的x值(相对于画布); y0:圆心的y值(相对于画布);
r:圆的半径;
beginAngel:开始角度; endAngel:结束角度;
counterclockwise:true(逆时针)/ false(顺时针,默认属性);

• 案例分析

此饼状图分为5份,每份都有自己的属性(所属城市,颜色,所占比例),所以我们首先应该定义一个数据包(数组),根据数据包中城市所占的比例值,我们计算出每个城市圆的角度,通过角度来渲染对应的颜色;整体思路就是这样.

• 实现代码

    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    //1.创建数据包(信息)
    var infoArr = [
        {name:'北京', color:'yellow', value:0.3},
        {name:'上海', color:'red', value:0.2},
        {name:'广州', color:'green', value:0.1},
        {name:'深圳', color:'purple', value:0.15},
        {name:'天津', color:'blue', value:0.25}
    ];
     //2.定义圆心
    var x0 = canvas.width * 0.5, y0 = canvas.height * 0.5;//显示在画布中间
     //2.1定义半径
    var radius = 150;
     //2.2定义起始角度
    var beginAngle = -90 *Math.PI/180;(定义初始角度为-90deg)
     //3.遍历,绘制扇形
    for (var i = 0; i < dataArr.length; i++) {
        //3.1扇形角度
        var tempAngle = dataArr[i].value * 360 *Math.PI/180;
        //3.2结束角度
        var endAngle = beginAngle + tempAngle;

        //3.3开启路径
        ctx.beginPath();
        //3.4起点
        ctx.moveTo(x0, y0);
        //3.5绘制弧度
        ctx.arc(x0, y0, radius, beginAngle, endAngle);
        //3.6设置颜色
        ctx.fillStyle = dataArr[i].color;
        //3.7填充
        ctx.fill();
        //4.绘制文字
        //4.1常量
        var textAngle = beginAngle + tempAngle * 0.5; //角度
        var text = dataArr[i].name + dataArr[i].value * 100 + '%';
        console.log(text);
        //4.2文字坐标
        var textX = x0 + (radius + 30) * Math.cos(textAngle);
        var textY = y0 + (radius + 30) * Math.sin(textAngle);
        //4.3文字字号和字体
        ctx.font = "20px '微软雅黑'";
        //4.4判断文字是否在左边
        if((textAngle > 90 *Math.PI/180) && (textAngle < 270 *Math.PI/180) ) {
            ctx.textAlign = 'end';//文字的右侧在基线的左端
        }
        //4.5 绘制文字
        ctx.fillText(text, textX, textY);
        //5.更新起始角度, 将当前扇形的结束角度作为下一个扇形的起始角度
        beginAngle = endAngle;
    }

代码每一步骤都有对应分析,最重要的是整个过程的思路分析,有不明白的欢迎简信我,有不足之处也欢迎指正,O(∩_∩)O谢谢大家!