Detailed explanation of the steps to dynamically implement pie charts in html5+canvas-HTML Tutorial-php.cn

Detailed explanation of the steps to dynamically implement pie charts in html5+canvas

php中世界最好的语言

Release： 2018-05-07 17:45:39

Original

3561 people have browsed it

This time I will bring you a detailed explanation of the steps to dynamically implement a pie chart in html5 canvas. What are the precautions for dynamically implementing a pie chart in html5 canvas. Here are practical cases, let’s take a look.

Let’s look at the renderings first

##There is no reference to third-party libraries such as jquery, but only the

dom operation and the characteristics of canvas Written.

Canvas circle drawing is generally divided into solid circles and hollow circles.

According to the demand analysis, we know that the circle is a solid circle.

1. First use canvas to draw a solid circle

//伪代码
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,开始角,结束角);
ctx.fillStyle = 'green';
ctx.closePath();
ctx.fill();

Copy after login

2. Draw a pie chart according to different colors

//伪代码
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,绿色开始角,绿色结束角);
ctx.fillStyle = 'green';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,红色开始角,红色结束角);
ctx.fillStyle = 'red';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,黄色开始角,黄色结束角);
ctx.fillStyle = 'yellow';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,紫色开始角,紫色结束角);
ctx.fillStyle = 'purple';
ctx.closePath();
ctx.fill();

Copy after login

3.Dynamic drawing Pie chart

Three methods are generally recommended on the Internet for dynamically drawing circles: requestAnimationFrame, setInterval (timing), and dynamic angle calculation.

Here I use the first requestAnimationFrame method.

A problem was discovered during the writing process, that is, when dynamically drawing a circle, it is not drawn based on the coordinates of the center of the circle. In order to solve this problem, you need to redefine the coordinates of the canvas brush as the coordinates of the original circle center each time you draw a circle.

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!