canvas编写同心圆

直接上代码

最终页面

需要的插件

Chart.js

html代码

<canvas id="canvas_circle" height="120" width="120" style="margin-bottom: 0px;">
        浏览器不支持canvas
</canvas>

js代码

//绘制饼图
function drawCircle(canvasId, data_arr, color_arr, text_arr) {
    var c = document.getElementById(canvasId);
    var ctx = c.getContext("2d");

//  var radius = parseInt($(c).css("width").split("px")[0])/2; //半径
//  console.log(parseInt($(c).css("width").split("px")[0])/2);
    var radius = c.height / 2;
    var ox = radius,oy = radius; //圆心

//  var width = 30,
//      height = 10;
//  var posX = ox * 2 + 20,
//      posY = 30;
//  var textX = posX + width + 5,
//      textY = posY + 10;

    var startAngle = 0, endAngle = 0; //开始弧度---结束弧度
    for(var i = 0; i < data_arr.length; i++) {
        //绘制饼图
        endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
        ctx.fillStyle = color_arr[i];
        ctx.beginPath();
        ctx.moveTo(ox, oy);     //移动到到圆心
        ctx.arc(ox, oy, radius, startAngle, endAngle, false);
        ctx.closePath();
        ctx.fill();
        startAngle = endAngle;  //设置起始弧度

        //绘制比例图及文字
//      ctx.fillStyle = color_arr[i];
//      ctx.fillRect(posX, posY + 20 * i, width, height);
//      ctx.moveTo(posX, posY + 20 * i);
//      ctx.font = 'bold 12px 微软雅黑'; //斜体 30像素 微软雅黑字体
//      ctx.fillStyle = color_arr[i]; //"#000000";
//      var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";
//      ctx.fillText(percent, textX, textY + 20 * i);
    }

    radius = radius - 40; //半径
    ox = radius + 40,
    oy = radius + 40; //圆心

    startAngle = 0; //起始弧度
    endAngle = 0; //结束弧度
    for(var i = 0; i < data_arr.length; i++) {
        //绘制饼图
        endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
        ctx.fillStyle = "#FFFFFF";
        ctx.beginPath();
        ctx.moveTo(ox, oy);     //移动到到圆心
        ctx.arc(ox, oy, radius, startAngle, endAngle, false);
        ctx.closePath();
        ctx.fill();
    }
}

function init() {
    //绘制饼图
    //比例数据和颜色
    var data_arr = [0.2, 0.35, 0.45];
    var color_arr = ["#FDB128", "#F46950", "#1DAC91"];
    var text_arr = ["第一季度", "第二季度", "第三季度"];

    drawCircle("canvas_circle", data_arr, color_arr, text_arr);
}

//页面加载时执行init()函数
window.onload = init;