JavaScript?canvas繪制動態(tài)圓環(huán)進度條

更新時間：2022年06月30日 17:10:15 作者：前端小白的江湖路

這篇文章主要為大家詳細介紹了JavaScript?canvas繪制動態(tài)圓環(huán)進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript canvas繪制動態(tài)圓環(huán)進度條的具體代碼，供大家參考，具體內(nèi)容如下

由于使用的是vue開發(fā)，所以就展示一下繪制函數(shù)好了，上圖是效果圖

drawMain(drawing_elem, percent, forecolor, bgcolor) {
? ? ? ? ? ? /*
? ? ? ? ? ? ? ? @drawing_elem: 繪制對象
? ? ? ? ? ? ? ? @percent：繪制圓環(huán)百分比, 范圍[0, 100]
? ? ? ? ? ? ? ? @forecolor: 繪制圓環(huán)的前景色，顏色代碼
? ? ? ? ? ? ? ? @bgcolor: 繪制圓環(huán)的背景色，顏色代碼
? ? ? ? ? ? */
? ? ? ? ? ? var context = drawing_elem.getContext("2d");
? ? ? ? ? ? var center_x = drawing_elem.width / 2;
? ? ? ? ? ? var center_y = drawing_elem.height / 2;
? ? ? ? ? ? var rad = Math.PI*2/100;?
? ? ? ? ? ? var speed = 0;
? ? ? ? ? ??
? ? ? ? ? ? // 繪制背景圓圈
? ? ? ? ? ? function backgroundCircle(){
? ? ? ? ? ? ? ? context.save();
? ? ? ? ? ? ? ? context.beginPath();
? ? ? ? ? ? ? ? context.lineWidth = 8; //設(shè)置線寬
? ? ? ? ? ? ? ? var radius = 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();
? ? ? ? ? ? }
?
? ? ? ? ? ? //繪制運動圓環(huán)
? ? ? ? ? ? function foregroundCircle(n){
? ? ? ? ? ? ? ? context.save();
? ? ? ? ? ? ? ? context.strokeStyle = forecolor;
? ? ? ? ? ? ? ? context.lineWidth = 8;
? ? ? ? ? ? ? ? context.lineCap = "round";
? ? ? ? ? ? ? ? var radius = 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();
? ? ? ? ? ? }
?
? ? ? ? ? ? //繪制文字
? ? ? ? ? ? function text(n){
? ? ? ? ? ? ? ? context.save(); //save和restore可以保證樣式屬性只運用于該段canvas元素
? ? ? ? ? ? ? ? context.fillStyle = forecolor;
? ? ? ? ? ? ? ? var font_size = 40;
? ? ? ? ? ? ? ? context.font = font_size + "px Helvetica";
? ? ? ? ? ? ? ? var text_width = context.measureText(n.toFixed(0)+"%").width;
? ? ? ? ? ? ? ? context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
? ? ? ? ? ? ? ? context.restore();
? ? ? ? ? ? }
?
? ? ? ? ? ? //執(zhí)行動畫
? ? ? ? ? ? (function drawFrame(){
? ? ? ? ? ? ? ? window.requestAnimationFrame(drawFrame);
? ? ? ? ? ? ? ? context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
? ? ? ? ? ? ? ? backgroundCircle();
? ? ? ? ? ? ? ? text(speed);
? ? ? ? ? ? ? ? foregroundCircle(speed);
? ? ? ? ? ? ? ? if(speed >= percent) return;
? ? ? ? ? ? ? ? speed += 1;
? ? ? ? ? ? }());
? ? ? ? },

調(diào)用的話

var time_canvas = document.getElementById("time-graph-canvas");
?this.drawMain(time_canvas, 70, "#85d824", "#eef7e4");

var weather_canvas = document.getElementById("weather-graph-canvas");
? ? ? ? this.drawMain(weather_canvas, 90, "#2ba0fb", "#e5f1fa");

html文件

<div class="time-graph">
? ?<canvas id="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;
}

有些繪制細節(jié)需要注意，為了保證繪制的清晰度，canvas的大小需要設(shè)置為canvas父元素大小的2倍。

其他的代碼都有詳細的注釋，自己拷一下，運行一下就知道

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: