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

Webmaster · 浏览 472 · 点赞 0 · 评论 0 · 3年前 (2020-04-28)

简单的面向对象封装插件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>

 
<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>

下载地址：

文件名称：简单封装canvas绘制渐变圆圈

文件大小：3.3k适用版本：

更新日期：2020-04-28作者信息：

点击下载