Pie chart drawn with canvas, 6 equal, color random

All said programmers lazy, life is not lazy, such as shampoo, wash face, of course, also includes sharing. Here's a look at the pie chart I've drawn with H5 's new label canvas, which is randomly generated, generates 6 of equal numbers dynamically, and I do random data generation,

With the text, each share of the proportion on the display and opinions. , which is very good for analyzing data. The picture is as follows;

Canvas is a label provided by HTML5 to show the drawing effect. Canvas, Canvas. Used in HTML pages to show drawing effects. The first canvas was a proposal from Apple, which has been implemented in most browsers today.

Basic usage Syntax:

1. Use the canvas label to create a single area of the page. You can set its width and height to set the size of the area.
2. The width height of the default canvas is 300 and 400.
3. Do not use CSS to set the width height, you should use HTML attributes.
4. If the browser does not support the canvas label, it will be interpreted as a div tag. As a result, text is often embedded in the canvas to prompt the user's browser's ability.
5. Canvas compatibility is very strong, as long as the support of the label, the basic functions are the same, so do not consider compatibility issues.
6. Canvas itself cannot draw. is to use JavaScript to complete the drawing. The Canvas object provides an API for various drawing purposes.

Drawing steps

2. Gets the canvas object.
4. Invokes getContext a method that provides a string argument ‘2d‘ .
6. The method returns an object of the CanvasRenderingContext2D type. The object provides basic drawing commands.
8. Use CanvasRenderingContext2D the methods provided by the object to draw.
10. Basic drawing Commands
    • Set where to start drawing: context.moveTo( x, y ) .
    • Set the line to the position: context.lineTo( x, y ) .
    • Stroke drawing: context.stroke() .
    • Fill drawing: context.fill() .
    • Closed path: context.closePath() .
    • Drawing arcs

      Grammar:CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )

      Describe:

      1. This method is used to draw an arc, the position of the starting point and the stroke method or fill method can draw the sector.
      2. The first two parameter x in the method, Y represents the center coordinate of the drawing arc.
      3. The radius of the parameter represents the arc radius, in radians.
      4. The argument startangle and Endangle represent the beginning to the end of the angle. The angle is 0 radians to the right of the horizontal, and clockwise to the positive direction.
      5. The parameter anticlockwise indicates whether the default forward angle is applied, and if passed true indicates that the inverse pointer is positive. This parameter is optional.

Pie chart drawn with canvas, 6 equal, color random