canvas编写同心圆

来源：互联网发布：linux shell脚本入门编辑：程序博客网时间：2024/06/07 19:03

直接上代码

最终页面
这里写图片描述

需要的插件

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;

0 0