Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use Canvas to draw a circle". In daily operation, I believe many people have doubts about how to use Canvas to draw a circle. The editor consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "how to use Canvas to draw a circle". Next, please follow the editor to study!

Canvas is a new element in HTML5, specifically used to draw graphics, which is equivalent to putting a "canvas" on the page, in which you can draw graphics, but it does not mean drawing with the mouse, but you need to use Javascript to write scripts for the graphics you need to draw.

Using canvas, we can draw the following figure:

Before drawing the above picture, let's take a look at the relevant knowledge points:

First, start creating the path

Start creating the path using the beginPath method. The beginPath () method starts a path, or resets the current path. To put it simply, it is actually telling the canvas that I am going to start making drafts. Please erase all the previous drafts.

This method does not set parameters, but starts to create the path by calling this method. In this case, we need to draw a circle in a loop, and beginPath () is called each time the path is created in the loop.

The syntax is:

Context. BeginPath ()

Create a circular path

When creating a circular path, you need to use the arc () method of the graphics context object, which is defined as:

The arc () method creates an arc / curve (used to create a circle or partial circle).

The syntax of this method is:

This method uses six parameters

X is the x coordinate of the center of the circle

Y is the y coordinate of the center of the circle

R is the radius of the circle; sAngle is the starting angle, in radians (the 03:00 position of the circle of the arc is 0 degrees)

EAngle is the end angle, measured in radians

Counterclockwise specifies whether to draw counterclockwise or clockwise (False = clockwise, true = counterclockwise).

The arc () method can draw not only circles but also arcs, so the start and end angles must be specified.

Close the path

After the path is created, close the path using the closePath () method of the drawing context object.

The closePath () method creates a path from the current point to the start point.

Syntax:

Context.closePath ()

After the path is closed, the creation of the path is complete. However, it is important to note that at this time, the path has only been created, and no graphics have been really drawn. Let's go on to learn how to set the drawing style and fill the current path.

Fourth, set the drawing style

To set the drawing style, you need to use fillStyle. The fillStyle property sets or returns the color, gradient, or mode used to fill the painting.

Syntax: context.fillStyle=color | gradient | pattern

Color: the CSS color value indicating the fill color of the drawing. The default value is # 000000

Gradient: gradient object (linear or radioactive) used to fill the drawing

Pattern: the pattern object used to populate the drawing.

Here we need to use fillStyle to set the color.

Fifth, fill graphics

We need to use the fill () method to fill the circle that has been set.

The fill () method populates the current image (path). The default color is black.

Syntax:

Context.fill ()

Using what we have learned above, let's draw a circle first.

We draw a circle with a center of 25 pixels on the x-axis, 25 pixels on the y-axis, a radius of 10 pixels, a starting angle of 0, an end angle of 2*PI, counterclockwise, and a circle filled with translucent green color in a canvas that is 500pixel wide and 500pixel high, with a frame of 1 pixel black solid line.

The specific code is as follows:

Use canvas to draw circles

# canvas {

Border:1px solid # 000

}

Var myCanva = document.getElementById ("canvas")

Var ctx = myCanva.getContext ("2d")

Ctx.beginPath ()

Ctx.arc (25,25,10,0, Math.PI * 2, true)

Ctx.closePath ()

Ctx.fillStyle = 'rgba (0.255pr 00.25pl)'

Ctx.fill ()

Seventh, to draw the diagram mentioned at the beginning of the article, you only need to add a loop to achieve it.

The specific code is as follows:

Use canvas to draw circles

# canvas {

Border:1px solid # 000

}

Var myCanva = document.getElementById ("canvas")

Var ctx = myCanva.getContext ("2d")

For (var I = 0; I < 10; iTunes +) {

Ctx.beginPath ()

Ctx.arc (I * 25, I * 25, I * 10, 0, Math.PI * 2, true)

Ctx.closePath ()

Ctx.fillStyle = 'rgba (0.255pr 00.25pl)'

Ctx.fill ()

}

The result of running this code is as follows:

At this point, the study on "how to use Canvas to draw circles" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.