/*

@drawing_elem:绘制对象

@percent：绘制圆环百分比,范围[0,100]

@forecolor:绘制圆环的前景色，颜色代码

@bgcolor:绘制圆环的背景色，颜色代码

*/

varcontext=drawing_elem.getContext("2d");

varcenter_x=drawing_elem.width/2;

varcenter_y=drawing_elem.height/2;

varrad=Math.PI*2/100;

varspeed=0;

//绘制背景圆圈

functionbackgroundCircle(){

context.save();

context.beginPath();

context.lineWidth=8;//设置线宽

varradius=center_x-context.lineWidth;

context.lineCap="round";

context.strokeStyle=bgcolor;

context.arc(center_x,center_y,radius,0,Math.PI*2,false);

context.stroke();

context.closePath();

context.restore();

}

//绘制运动圆环

functionforegroundCircle(n){

context.save();

context.strokeStyle=forecolor;

context.lineWidth=8;

context.lineCap="round";

varradius=center_x-context.lineWidth;

context.beginPath();

context.arc(center_x,center_y,radius,-Math.PI/2,-Math.PI/2+n*rad,false);//用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)

context.stroke();

context.closePath();

context.restore();

}

//绘制文字

functiontext(n){

context.save();//save和restore可以保证样式属性只运用于该段canvas元素

context.fillStyle=forecolor;

varfont_size=40;

context.font=font_size+"pxHelvetica";

vartext_width=context.measureText(n.toFixed(0)+"%").width;

context.fillText(n.toFixed(0)+"%",center_x-text_width/2,center_y+font_size/2);

context.restore();

}

//执行动画

(functiondrawFrame(){

window.requestAnimationFrame(drawFrame);

context.clearRect(0,0,drawing_elem.width,drawing_elem.height);

backgroundCircle();

text(speed);

foregroundCircle(speed);

if(speed>=percent)return;

speed+=1;

}());

},

调用的话

vartime_canvas=document.getElementById("time-graph-canvas");

this.drawMain(time_canvas,70,"#85d824","#eef7e4");

varweather_canvas=document.getElementById("weather-graph-canvas");

this.drawMain(weather_canvas,90,"#2ba0fb","#e5f1fa");

html文件

<divclass="time-graph">

<canvasid="time-graph-canvas"width="160"height="160"></canvas>

</div>

css文件

.time-graph{

padding-top:20px;

display:flex;

display:-webkit-flex;

justify-content:center;

align-items:center;

}

#time-graph-canvas{

width:80px;

height:80px;

}

有些绘制细节需要注意，为了保证绘制的清晰度，canvas的大小需要设置为canvas父元素大小的2倍。

下一篇：限制文本框输入N个字符的js代码