前端 – 简单封装canvas绘制渐变圆圈

简单的面向对象封装插件canvas绘制渐变圆圈示例。对前端爱好和初学可供参考。

DrawCanvascircle() 圆圈绘制
    • 支持线条渐变
    • 支持文字描述、文字位置 单文字
    • 等比计算:// 若数据两项自动计算占 一项数据将按360的总占比计算。

 

JavaScript 语法:context.arc(x,y,r,sAngle,eAngle,counterclockwise); 更多请参考《html5-canvas绘制》

参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角,以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认),true = 逆时针。

 

封装绘制代码块:

;(function(global){
/* initCanvascircle() 圆圈绘制
* 支持线条渐变
* 支持文字描述、文字位置 单文字
* 等比计算:// 若数据两项自动计算占
*/

var initCanvascircle = { //默认初始
DrawCanvaswrap:undefined,
cavasSize : 132, //画布大小 避免与实际拉伸 请设置与标签cavas大小一致
cavasBorderWidth : 10, //border宽度
ring_fColor : '#f00', //占比色
ring_tColor : '#000', //剩余占比色
ratio_f:0, //占比数1
ratio_t:0, //占比数2
spacing:15, //占比之间间距
ratio_color:'#000000', //占比分数文字颜色
ratio_fontSize:'24px', //占比分数字体大小
ratio_bold:true, //占比分数文字粗体
ration_position:'top', //位置
decs_text:'总得分', //占比描述文字
decs_color:'#333333',
decs_bold:true, //占比描述文字粗体
decs_fontSize:'12px' //占比描述文字大小
};
function DrawCanvascircle(options){
if(!options.DrawCanvaswrap){
console.warn('From DrawCanvascircle prompt:Please bind element node')
return false;
}
Object.assign(this, initCanvascircle, options);
this.initCanvasFun();
}
DrawCanvascircle.prototype = { //原型提供方法
initCanvasFun:function () { //定义圆圈绘制方法
//if(this.ratio_t==0){this.ratio_t = 360 - this.ratio_f}
this.ratio_f = this.ratio_t == 0 && this.ratio_f>360 ? 360 : this.ratio_f;
this.ratio_t = this.ratio_t == 0 ? (this.ratio_f>0?(360 - this.spacing) - this.ratio_f:0) : this.ratio_t;
var _oRAT = Number((Number(this.ratio_f *(360 - this.spacing))/(Number(this.ratio_f) + Number(this.ratio_t))).toFixed(1)); //所占度数计算
var canvas = document.getElementById(this.DrawCanvaswrap);
var ctx = canvas.getContext('2d');
var cavasSize = this.cavasSize;
canvas.width = cavasSize;
canvas.height = cavasSize;
ctx.lineWidth = this.cavasBorderWidth;
ctx.lineCap = "round";
ctx.textAlign = "center"; // 设置水平对齐方式
ctx.textBaseline = "middle"; // 设置垂直对齐方式
//绘制浅色弧线,从弧线起点开始到弧线终点
ctx.beginPath();
/*圆的中心的 x 坐标。、 圆的中心的 y 坐标。、 圆的半径。、起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)、结束角,以弧度计。*/
ctx.arc(cavasSize/2, cavasSize/2, cavasSize/2-this.cavasBorderWidth, Math.PI/180 * (((360 - this.ratio_f)<this.spacing&&this.ratio_t<0)?(-this.cavasBorderWidth/2):(-this.spacing) ), Math.PI/180 * (360 - _oRAT),true); ctx.fillStyle = "rgba(255,255,255,0)";//透明 ctx.fill(); var rings = ctx.createLinearGradient(cavasSize-this.spacing, cavasSize/2, 0, 0); rings.addColorStop("1",String(Array.isArray(this.ring_fColor) ? this.ring_fColor.length==2 ? this.ring_fColor[0]:this.ring_fColor:this.ring_fColor) ); rings.addColorStop("0",String(Array.isArray(this.ring_fColor) ? this.ring_fColor.length==2 ? this.ring_fColor[1]:this.ring_fColor:this.ring_fColor) ); ctx.strokeStyle = rings ; ctx.stroke(); //_t数据绘制 if((360 - _oRAT - this.spacing)>0){
ctx.beginPath();
ctx.arc(cavasSize/2, cavasSize/2, cavasSize/2-this.cavasBorderWidth,0, Math.PI/180 * (360 - _oRAT - this.spacing),false);
var rings = ctx.createLinearGradient(cavasSize-this.spacing, cavasSize/2,0 , 0);
rings.addColorStop("0",String(Array.isArray(this.ring_tColor) ? this.ring_tColor.length==2 ? this.ring_tColor[0]:this.ring_tColor:this.ring_tColor) );
rings.addColorStop("1",String(Array.isArray(this.ring_tColor) ? this.ring_tColor.length==2 ? this.ring_tColor[1]:this.ring_tColor:this.ring_tColor) );
ctx.strokeStyle = rings; // 绘制路径颜色
ctx.stroke();
}
ctx.beginPath();
ctx.font = this.ratio_fontSize+' '+ (this.ratio_bold?'bold':'400')+' '+ '微软雅黑';
ctx.fillStyle = this.ratio_color;
// 绘制文字(参数:文字,x坐标,y坐标)
ctx.fillText(this.ratio_f, cavasSize/2, this.ration_position=='center'?cavasSize/2:cavasSize/2-(parseInt(this.ratio_fontSize)/2)+5);
ctx.stroke();

ctx.beginPath();
ctx.font = this.decs_fontSize +' '+ (this.decs_bold?'bold':'400') +' '+ '微软雅黑';
ctx.fillStyle = this.decs_color;
ctx.fillText(this.decs_text, cavasSize/2, cavasSize/2 + parseInt(this.ratio_fontSize)/2+this.cavasBorderWidth);
ctx.stroke();
}
};
global.DrawCanvascircle = DrawCanvascircle; //注册全局 支持script标签引入
})(this || (typeof window !== 'undefined' ? window : global));

 

html代码块:

 

<style>
        #container{<br />
            position: relative;<br />
            width: 460px;<br />
            margin: 0 auto;<br />
            background-color: #d5e7fa;<br />
        }<br />
        .cavan_right_dsc{<br />
            position: absolute;<br />
            right: 0px;<br />
            top: 0px;<br />
            /*border:1px solid #f00;*/<br />
        }<br />
        .right_o{<br />
            padding-right: 15px;<br />
        }<br />
        .dsc_txt{<br />
            font-size: 13px;<br />
            color: #95a7ba;<br />
            padding-left: 12px;<br />
            vertical-align: middle;<br />
        }<br />
        .icon_j{<br />
            display: inline-block;<br />
            width: 14px;<br />
            height: 14px;<br />
            border-radius: 3px;<br />
            background-color: #9932CC;<br />
            vertical-align: middle;<br />
        }<br />
        .icon_t{<br />
            background-color: #87CEFF;<br />
        }<br />
        .num{<br />
            font-size: 23px;<br />
            padding-left: 25px;<br />
        }<br />
        .change_num{<br />
            position: relative;<br />
            padding-left: 12px;<br />
            margin-left: 15px;<br />
            font-size: 15px;<br />
            color: #a8bacd;<br />
        }</p>
<p>     .icon_rise_arrow{<br />
            position: absolute;<br />
            left: 0px;<br />
            top: 0px;<br />
            display: inline-block;<br />
            width: 5px;<br />
            height: 6px;<br />
            background-color: #53d187;<br />
        }<br />
        .icon_rise_arrow:before{<br />
            content: ' ';<br />
            display: block;<br />
            position: absolute;<br />
            left: -4px;<br />
            top: -14px;<br />
            width: 0px;<br />
            height: 0px;<br />
            border-width: 7px;<br />
            border-style: solid;<br />
            border-color: transparent;<br />
            border-color:transparent transparent #53d187 transparent;</p>
<p>     }<br />
    </style>

&nbsp;
<div id="container"><canvas id="cavsElem" width="400" height="400">
你的浏览器不支持canvas,请升级浏览器
</canvas>
<div class="cavan_right_dsc">
<div class="right_o"><i class="icon_j"></i><span class="dsc_txt">魅力值</span>
<div class="desc_num"><span class="num">45</span>
<span class="change_num"><i class="icon_rise_arrow"></i>43</span></div>
</div>
<div class="right_o"><i class="icon_j icon_t"></i><span class="dsc_txt">努力值</span>
<div class="desc_num"><span class="num">25</span>
<span class="change_num"><i class="icon_rise_arrow"></i>12</span></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/DrawCanvascircle.js"></script>
<script>
    let initCanvasFun = new DrawCanvascircle({  //
        DrawCanvaswrap:'cavsElem',  //* 节点元素
        cavasSize:200, //* 画布大小
        ratio_f:330,  //* 占比数1
        ratio_t:0,
        cavasBorderWidth:15,
        spacing:15, //占比之间间距
        ring_fColor:["#1E90FF","#9932CC"],  //占比1渐变色
        ring_tColor:["#87CEFF","#bed0e3"],
        ratio_color:'#000000',  //占比分数文字颜色
        ratio_fontSize:'38px',  //占比分数字体大小
        ratio_bold:true,   //占比分数文字粗体
        ration_position:'top', //位置
        decs_text:'总得分',  //占比描述文字
        decs_color:'#95a7ba',  //占比描述文字颜色
        decs_bold:true, //占比描述文字粗体
        decs_fontSize:'18px'  //占比描述文字大小
    });
</script>

 


非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:https://www.ydxinzuo.cn/archives/1620

作者: Webmaster

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

联系我们

0000000

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-16:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部