Canvas绘制渐变圆环图

来源：互联网发布：单片机仿真软件proteus 编辑：程序博客网时间：2024/04/30 10:44
闲言少叙书归正传直接上代码
这里写图片描述
<canvas id="circle" width="115" height="115"></canvas>circle(80) //传入一个百分比function circle(deg) {    var canvas = document.getElementById('circle');    var ctx = canvas.getContext("2d");    var width = canvas.width;    var height = canvas.height;    /*圆环中心文字*/    ctx.font = "18px Microsoft YaHei";    ctx.fillStyle = '#38dcf3';    var ratioStr = deg+'%';     var text = ctx.measureText(ratioStr);    console.log("text.weght",text.width)    ctx.fillText(ratioStr, (115 - text.width) / 2,height/2+20.48/4);    /*底下的灰圆环*/    var circleObj = {        ctx: ctx,        /*圆心*/        x: width/2,        y: height/2,        /*半径*/        radius: width/2-20.48/2,        /*环的宽度*/        lineWidth: 20.48    }    /*上面的渐变圆环*/    circleObj.startAngle = 135*Math.PI/180 ; //startAngle弧度制 从135度开始画    /*结束的度数*/    circleObj.endAngle = 135*Math.PI/180-Math.PI*2    circleObj.color = '#eee';    drawCircle(circleObj);    /*有色的圆环*/    /*开始的度数-从上一个结束的位置开始*/    circleObj.startAngle = circleObj.endAngle;        /*结束的度数*/    circleObj.endAngle = circleObj.endAngle-(Math.PI*2*deg/100);    var my_gradient=ctx.createLinearGradient(0,0,0,170);    my_gradient.addColorStop(0,"#70f2c3");    my_gradient.addColorStop(0.5,"#52e6dd");    my_gradient.addColorStop(1,"#2cd8fc");    circleObj.color = my_gradient    drawCircle(circleObj);//6ff1c4}/*画曲线*/function drawCircle(circleObj) {    var ctx = circleObj.ctx;    ctx.beginPath();    ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, true); //true表示逆时针绘画    //设定曲线粗细度    ctx.lineWidth = circleObj.lineWidth;    //给曲线着色    ctx.strokeStyle = circleObj.color;    //连接处样式    ctx.lineCap = 'round';    //给环着色    ctx.stroke();    ctx.closePath();}
阅读全文
1 0