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

Today, I will talk to you about how to draw arcs and circles through HTML5Canvas API. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

JavaScript Code copies content to the clipboard

Arc (x, y, radius, startRad, endRad, anticlockwise)

On the canvas canvas, draw an arc on a circle with a radius of radius centered at the coordinate point (XMagol y). The starting arc of this arc is startRad and the ending Radian is endRad. The radians here are calculated at the angle of clockwise rotation based on the positive direction of the x-axis (03:00 clock). Anticlockwise indicates whether to start drawing counterclockwise or clockwise, true for counterclockwise, and false for clockwise. The anticlockwise parameter is optional and defaults to false, that is, clockwise.

The Radian calculation method in arc () method

JavaScript Code copies content to the clipboard

ArcTo (x1, y1, x2, y2, radius)

This method takes advantage of the angle formed by the current endpoint, the endpoint 1 (x1), and the endpoint 2 (x2), and then draws an arc on a circle tangent to both sides of the angle and with a radius of radius. In general, the starting position of the arc is the current endpoint, the end position is the endpoint 2, and the direction of the arc is the direction of the shortest arc connecting the two endpoints. In addition, if the current endpoint is not on the specified circle, this method draws a straight line from the current endpoint to the start of the arc.

Since there is a lot of detail about the arcTo () method, please step here to see the detailed usage of arcTo ().

Now that you know the above API for canvas to draw arcs, let's take a look at how to draw arcs using arc (). We already know that the fourth and fifth parameters received by arc () represent the start and end radians of the drawn arc. I believe that all readers have learned radians in math or geometry courses at school. Radians are a unit of angle. An arc whose length is equal to the radius and whose center angle is 1 Radian. We also know that the circumference of a circle with radius r is 2 π r. With this geometric knowledge, we can use the arc () method to draw arcs.

Use canvas to draw arcs

Now, let's draw a 1x4 arc of a circle with radius 50px.

JavaScript Code copies content to the clipboard

An example of getting started with HTML5 Canvas Arc drawing your browser does not support canvas tags. / / get Canvas object (canvas) var canvas = document.getElementById ("myCanvas"); / / simply detect whether the current browser supports Canvas object, so as to avoid prompting syntax error if (canvas.getContext) {/ / get the corresponding CanvasRenderingContext2D object (brush) var ctx = canvas.getContext ("2d") in some browsers that do not support html5. / / start a new drawing path ctx.beginPath (); / / set the color of the arc to blue ctx.strokeStyle = "blue"; var circle = {x: 100, / / the x-axis coordinate value of the center of the circle is y: 100, / / the y-axis coordinate value of the center r: 50 / / the radius of the circle} / / draw the arc ctx.arc (circle.x, circle.y, circle.r, 0, Math.PI / 2, false) along the clockwise direction of the circle centered by the coordinate point (100100) and with a radius of 50px; / / draw the arc ctx.stroke () according to the specified path;}

The corresponding display effect is as follows:

Draw an arc in a clockwise direction using canvas

As shown above, we set the center coordinate of the circle of the drawn arc to (100100) and the radius to 50px. Since the circumference of a circle with radius r is 2 π r, that is to say, a complete circle, its corresponding Radian is 2 π (360 °in conventional angle), so we want to draw a circle 1 stroke 4 arc, as long as the Radian is π / 2 (that is, 90 °). In the above code, we use the constant Math.PI in JavaScript that represents pi.

In addition, in the above code, we set the direction of drawing the arc to clockwise (false). Since the starting Radian is 0 and the ending Radian is π / 2, the arc is drawn clockwise from the positive direction of the x-axis to get the above figure. What would happen if we changed the direction of the arc in the above code to counterclockwise?

JavaScript Code copies content to the clipboard

/ / get Canvas object (canvas) var canvas = document.getElementById ("myCanvas"); / / simply detect whether the current browser supports Canvas object, so as to avoid prompting syntax error if (canvas.getContext) {/ / get the corresponding CanvasRenderingContext2D object (brush) var ctx = canvas.getContext ("2d") in some browsers that do not support html5. / / start a new drawing path ctx.beginPath (); / / set the color of the arc to blue ctx.strokeStyle = "blue"; var circle = {x: 100, / / the x-axis coordinate value of the center of the circle is y: 100, / / the y-axis coordinate value of the center r: 50 / / the radius of the circle} / draw an arc ctx.arc (circle.x, circle.y, circle.r, 0, Math.PI / 2, true) along the coordinate point (100100) in the counterclockwise direction of a circle with a center and a radius of 50px; / / draw an arc ctx.stroke () according to the specified path;}

The corresponding display effect is as follows:

Use canvas to draw an arc counterclockwise

Use canvas to draw circles

After we have learned to draw an arc, for example, it is no problem that we want to draw a circle, we just need to change the end Radian of the above code to 2 π.

JavaScript Code copies content to the clipboard

/ / get Canvas object (canvas) var canvas = document.getElementById ("myCanvas"); / / simply detect whether the current browser supports Canvas object, so as to avoid prompting syntax error if (canvas.getContext) {/ / get the corresponding CanvasRenderingContext2D object (brush) var ctx = canvas.getContext ("2d") in some browsers that do not support html5. / / start a new drawing path ctx.beginPath (); / / set the color of the arc to blue ctx.strokeStyle = "blue"; var circle = {x: 100, / / the x-axis coordinate value of the center of the circle is y: 100, / / the y-axis coordinate value of the center r: 50 / / the radius of the circle} / draw a circle ctx.arc (circle.x, circle.y, circle.r, 0, Math.PI * 2, true) with a radius of 50px using the coordinate point (100100) in canvas as the center; / / draw an arc ctx.stroke () according to the specified path;}

The corresponding display effect is as follows:

JavaScript Code copies content to the clipboard

/ / get Canvas object (canvas) var canvas = document.getElementById ("myCanvas"); / / simply detect whether the current browser supports Canvas object, so as to avoid prompting syntax error if (canvas.getContext) {/ / get the corresponding CanvasRenderingContext2D object (brush) var ctx = canvas.getContext ("2d") in some browsers that do not support html5. / / start a new drawing path ctx.beginPath (); / / set the color of the arc to blue ctx.strokeStyle = "blue"; var circle = {x: 100, / / the x-axis coordinate value of the center of the circle is y: 100, / / the y-axis coordinate value of the center r: 50 / / the radius of the circle} / draw a circle ctx.arc (circle.x, circle.y, circle.r, 0, Math.PI * 2, true) with a radius of 50px using the coordinate point (100100) in canvas as the center; / / draw an arc ctx.stroke () according to the specified path;}

Note: the start Radian parameter startRad and the end Radian parameter endRad in the arc () method are both in radians. Even if you fill in a number, such as 360, it will still be regarded as 360 radians. What is the useful consequence of setting the end Radian of the above code to 360? It depends on the direction of the drawing (that is, the value of the anticlockwise parameter). If it is drawn clockwise (false), a complete circle will be drawn; if it is drawn counterclockwise, radians greater than 2 π will be converted into radians equal to but not more than 2 π. For example, if you set the end Radian in the above code to 3 π (Math.PI * 3), if anticlockwise is false, it will be displayed as a complete circle, and if it is true, the display will be the same as when set to π.

The drawing effect of false rotation when the end Radian is set to 3 π

Drawing effect of counterclockwise (true) rotation when the end Radian is set to 3 π

After reading the above, do you have any further understanding of how to draw arcs and circles through HTML5Canvas API? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.