Referring to a case on the internet, “Reference is to draw a dynamic circle.” Now I need to adapt it into three-quarters of the circle.

Achieving results:

Style display canvas drawing basic operation settings can be

Reference source code link: original: https://blog.csdn.net/qq_21058391/article/details/76691047

> To modify the source code cited above, several points should be noted

1. understanding the principle of drawing circles is based on radians.

2. Calculating formula of radian

3. Convert every angle to radian

4. coordinates of starting point and end point

> Draw a picture for yourself, easy to understand!

Firstly, we can see the starting point and the key point according to the graph, and see the coordinates to know that the starting point is – 240 degrees. This positive and negative should be distinguished. The formula for calculating each radian is given.

Convert the angle to radian:

var radians = degrees * (Math.PI/180);

So we can make a revision.

Code after revision

`drawMain(drawing_elem, percent, forecolor, bgcolor,fillColor) {

/*

@ drawing_elem: Drawing objects

@ percent: Percentage of circles drawn, range [0, 100]

@ Forecolor: Draw the foreground color of the circle, color code

@ bgcolor: Background color, color code for drawing rings

*/

var context = drawing_elem.getContext(‘2d’)

var center_x = drawing_elem.width / 2;

var center_y = drawing_elem.height / 2;

Var rad = Math.PI/3*5/100; // Drawn a 300-degree circle

// 65 * Math.PI / 180, 115 * Math.PI / 180

// var speed = 0;

// Draw the background circle

function backgroundCircle(){

context.save();

context.beginPath();

Context. lineWidth = 8; // Set line width

var radius = center_x – context.lineWidth;

context.lineCap = “round”;

context.strokeStyle = bgcolor;

context.arc(center_x, center_y, radius,-Math.PI/180*240, Math.PI/180*60, false);

* starting point, end point, radius, starting point, ending point, whether clockwise / counterclockwise * *

context.stroke();

context.closePath();

context.restore();

}

// Drawing Motion Rings

function foregroundCircle(n){

context.save();

context.strokeStyle = forecolor;

context.lineWidth = 8;

context.lineCap = “round”;

var radius = center_x – context.lineWidth;

// console.log(endAngle)

context.beginPath();

Arc (center_x, center_y, radius, -Math.PI/180*240, -Math.PI/180*240+n*rad, false); //for drawing arc context.arc (x coordinates, y coordinates, radius, starting angle, ending angle, clockwise/counterclockwise)

context.stroke();

context.closePath();

context.restore();

}

// Drawing Text

function text(n){

Context. save (); //save and restore ensure that style attributes are applied only to the canvas element in that section

context.fillStyle = fillColor;

var font_size = 20;

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();

}

// Execute animation

(function drawFrame(){

// Remove animation loading effect

// window.requestAnimationFrame(drawFrame);

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

backgroundCircle();

text(percent);

foregroundCircle(percent);

**// Remove the animation loading effect. These two lines of code are removed because they draw slowly when the network speed is slow and the dynamic effect is too slow.

// if(speed >= percent) return;

// speed += 1;

}());

},

The next step is to call this method, which is put into NextTick when calling. The problem encountered at that time is that the loading can only load the first one, the following loading can not come out, the problem of self-perception loading order is drawn but not rendered.

this.$nextTick(()=>{

for(var i =0;i

this.childrenTag = document.getElementById(“time-graph-canvas”+i);

let score = this.couponCenterLists[i].couponPercentage * 100;

this.drawMain(this.childrenTag, score, “#fff”, “rgba(255,255,255,0.4)”,”#fff”);

** The score variable is the data I extracted from the interface and stored in the score variable **

}

})

It’s basically that much. It’s not difficult to understand the starting point and calculation method of drawing.

————————————————

Translated from: original article link of CSDN blogger “weixin_43877575”: https://blog.csdn.net/weixin_43877575/article/details/84652961