Tutorial on drawing arcs using HTML5 canvas API

Time:2021-7-31

Draw a standard arc

Before we start to optimize our environment. Inspired by the texture of last class, if you don’t like this background, I also provide other background images in the images directory for you to choose from. In addition, all style sheets are written under < head >.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > new canvas < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.     }   
  28. </script>   
  29. </body>   
  30. </html>  

Operation results:
2016322110254564.jpg (850×500)

The reason why we want to draw a blank rectangle to fill the canvas is because we said before that the canvas is transparent. If the background color is not set, it will be covered by the < body > texture I set. To make it have the background color (white), we can only draw a rectangle to cover the canvas.

How about it? Isn’t it very cool?

Draw an arc using arc()
Arc () is used as follows:

JavaScript CodeCopy contents to clipboard
  1. context.arc(x,y,radius,startAngle,endAngle,anticlockwise)  

The first three parameters are circle center coordinates and circle radius. Startangle and endangle use radian values, not angle values. The radian is absolute, as shown in the figure below.
2016322110350997.jpg (600×425)

Anticlockwise indicates whether to draw clockwise or counterclockwise. It passes in a Boolean value. True means to draw counterclockwise, false means to draw clockwise, and the default value is false.

The radian rule is absolute. What do you mean? It refers to what kind of arc you want to draw. The radian is directly filled in according to the above standard.

For example, if you draw an arc of 0.5pi ~ 1Pi, if you draw it clockwise, it is only the 1 / 4 arc in the lower left corner; If you draw counterclockwise, it is the complementary 3 / 4 arc in the upper right corner. Try it yourself here, no more examples.

Drawing arcs using tangent points

Arcto () Introduction:
The arcto () method receives five parameters, which are the coordinates of the two tangent points and the arc radius. This method draws an arc according to the tangent, that is, an arc is determined by two tangent lines.
The details are as follows.

JavaScript CodeCopy contents to clipboard
  1. arcTo(x1,y1,x2,y2,radius)  

This function draws an arc with a given radius. The starting point of the arc is tangent to the line from the position of the current path to point (x1, Y1), and the end point of the arc is tangent to the line from point (x1, Y1) to point (X2, Y2). Therefore, it is usually used with moveto() or lineto(). Its ability can be replaced by a simpler arc (), which uses tangent points in the drawing method.

Draw an arc using tangent points:
In the following case, I also drew the tangent line to see it more clearly.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > draw an arc < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);   
  28.     };   
  29.   
  30.     function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){   
  31.         cxt.beginPath();   
  32.         cxt.moveTo(x0, y0);   
  33.         cxt.arcTo(x1, y1, x2, y2, r);   
  34.   
  35.         cxt.lineWidth = 6;   
  36.         cxt.strokeStyle = “red”;   
  37.         cxt.stroke();   
  38.   
  39.         cxt.beginPath();   
  40.         cxt.moveTo(x0, y0);   
  41.         cxt.lineTo(x1, y1);   
  42.         cxt.lineTo(x2, y2);   
  43.   
  44.         cxt.lineWidth = 1;   
  45.         cxt.strokeStyle = “#0088AA”;   
  46.         cxt.stroke();   
  47.   
  48.     }   
  49. </script>   
  50. </body>   
  51. </html>  

Operation results:
2016322110438098.jpg (850×500)

This case also well illustrates the role of each key point of arcto (). For a clearer explanation, I will mark an analysis diagram.
2016322110502905.jpg (600×425)

Note here that the starting point drawn by arcto () is (x0, Y0), but (x0, Y0) is not necessarily the tangent point of the arc. The real arcto () function only passes in (x1, Y1) and (X2, Y2). Where (x1, Y1) is called the control point, and (X2, Y2) is the tangent point of the arc end point, which is not necessarily on the arc. But (x0, Y0) must be on the arc.
A little bit. Let’s try it by changing the parameters of the drawarcto() function.
(X2, Y2) not necessarily on the arc:

JavaScript CodeCopy contents to clipboard
  1. drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);  

2016322110549543.jpg (600×425)

(x0, Y0) must be on the arc:

JavaScript CodeCopy contents to clipboard
  1. drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);  

2016322110625028.jpg (600×425)

Interestingly, it directly connects the tangent point and (x0, Y0) to form a line segment in order to pass through (x0, Y0). What a persistent arc

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]