Dynamic ring canvas to draw a progress bar

 

 

The use of the vue development, so we show how to draw function well, the figure is renderings

drawMain (drawing_elem, Percent, ForeColor, bgcolor) {
/ *
@drawing_elem: drawing object
@percent: Draw ring percentage range [0, 100]
@forecolor: Draw ring foreground color code
@bgcolor: Draw ring background color, a color code
* /
var context = drawing_elem.getContext ( "2D");
var = drawing_elem.width center_x / 2;
var = drawing_elem.height center_y / 2;
var RAD = Math.PI * 2/100;
var 0 = Speed;

// draw a circle background
function backgroundCircle () {
context.save ();
context.beginPath ();
context.lineWidth =. 8; // the line width set
var = center_x RADIUS - context.lineWidth;
context.lineCap = "round";
context.strokeStyle bgcolor =;
context.arc (center_x, center_y, RADIUS, 0, 2 * Math.PI, to false);
context.stroke ();
context.closePath ();
context.restore ();
}

// Draw annular motion
function foregroundCircle (n ) {
context.save ();
context.strokeStyle = ForeColor;
context.lineWidth =. 8;
context.lineCap = "round";
var = center_x RADIUS - context.lineWidth;
context.beginPath ();
context.arc (center_x, center_y , radius, -Math.PI / 2, -Math.PI / 2 + n * rad, false); // used to draw an arc context.arc (x coordinate, y coordinate, a radius, the initial angle end angle, clockwise / counterclockwise)
context.stroke ();
context.closePath ();
context.restore ();
}

// draw text
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();
}

//执行动画
(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;
}());
},

Then call

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

Note that some details of the drawing, in order to ensure the clarity of the drawing, the size of the canvas be set 2 times the size of the parent element of the canvas.

Other code has detailed notes about their own copy run will know
----------------

Transfer: Original article is CSDN blogger "front-end arena white road" in https://blog.csdn.net/qq_21058391/article/details/76691047