HTML5 canvas drawing – drawing graphics and text using canvas tutorial using HTML5 canvas to draw beautiful pictures

Time:2021-12-6

HTML5 is hot. Recently, there is an idea to use the relevant functions of HTML, so we should also study hard.

After taking a good look at the functions of canvas, I feel that HTML5 has become more and more functional in client interaction. Today, I took a look at canvas drawings. Below are several examples, which I will write down for future use.

1. Draw a line using canvas:

 

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16. cans.moveTo(20,30);// First starting point
  17. cans.lineTo(120,90);// Second point
  18. cans.lineTo(220,60);// Third point (starting from the second point)
  19.             cans.lineWidth=3;   
  20.             cans.strokeStyle = ‘red’;   
  21.             cans.stroke();   
  22.         }   
  23.     </script>  
  24.     <body onload=“pageLoad();”>  
  25.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  26.     </body>  
  27. </html>  

The two API methods used here, moveto and lineto, are the starting and ending coordinates of the line segment respectively. The variables are (x coordinate and Y coordinate). Strokestyle and stroke are the drawing style and drawing path respectively.

2. Draw gradient lines

Gradient lines have the effect of color gradient. Of course, the gradient style can follow the direction of the path or not:

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             cans.moveTo(0,0);   
  17.             cans.lineTo(400,300);   
  18.             var gnt1 = cans.createLinearGradient(0,0,400,300);// Starting and ending coordinates of linear gradient
  19. gnt1.addColorStop(0,’red’);// Create the start color of the gradient. 0 represents the offset. Personally, it means the relative position on the line. The maximum is 1. Any gradient color can be written in a gradient
  20.             gnt1.addColorStop(1,’yellow’);   
  21.             cans.lineWidth=3;   
  22.             cans.strokeStyle = gnt1;   
  23.             cans.stroke();   
  24.         }   
  25.     </script>  
  26.     <body onload=“pageLoad();”>  
  27.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  28.     </body>  
  29. </html>  

3. Draw a rectangle or square:

This rectangular box can only be generated by background code if html4 is used. Now the canvas function provided by HTML5 can be drawn easily, so the advantages of HTML5 are quite high.

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             cans.fillStyle = ‘yellow’;   
  17.             cans.fillRect(30,30,340,240);   
  18.         }   
  19.     </script>  
  20.     <body onload=“pageLoad();”>  
  21.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  22.     </body>  
  23. </html>  

FillRect () is a method used here. It can be seen from the literal meaning that this is to fill a rectangle. The parameters here are worth explaining fillRect (x, y, width, height). This is different from the coordinates in mathematics. For details, please see

Here X and Y start from the starting point in the upper left corner of canvas. Remember!!

4. Draw a simple rectangular box

In the above example, we talked about drawing a rectangular block and filling it with color. This example simply draws a rectangle without filling.

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             cans.strokeStyle = ‘red’;   
  17.             cans.strokeRect(30,30,340,240);   
  18.         }   
  19.     </script>  
  20.     <body onload=“pageLoad();”>  
  21.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  22.     </body>  
  23. </html>  
  24.   

This is very simple. Like the above example, fill is replaced by stroke. See the above example for details.

5. Draws a rectangle with a linear gradient

Gradient is a very good effect of filling. Combined with example 2 and example 3, we can create a gradient rectangle

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             var gnt1 = cans.createLinearGradient(10,0,390,0);   
  17.             gnt1.addColorStop(0,’red’);   
  18.             gnt1.addColorStop(0.5,’green’);   
  19.             gnt1.addColorStop(1,’blue’);   
  20.             cans.fillStyle = gnt1;   
  21.             cans.fillRect(10,10,380,280);   
  22.         }   
  23.     </script>  
  24.     <body onload=“pageLoad();”>  
  25.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  26.     </body>  
  27. </html>  
  28.   

No explanation, just remember fillRect (x, y, width, height).

6. Fill a circle

The circle has a wide range of uses, including ellipses.

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,true);   
  18.             cans.closePath();   
  19.             cans.fillStyle = ‘green’;// Originally, red was originally used here. When you look at the screenshot, you are stupid. You are afraid of being beaten by patriots on the street. In fact, you know~~
  20.             cans.fill();   
  21.         }   
  22.     </script>  
  23.     <body onload=“pageLoad();”>  
  24.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  25.     </body>  
  26. </html>  
  27.   

The usage of the arc method here is arc (x, y, radius, startangle, endangle, anticlockwise), which means (center X coordinate, center y coordinate, radius, start angle (radian), end angle radian, whether to draw clockwise);

Comparison of parameters in Arc:

a、cans.arc(200,150,100,0,Math.PI,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

d、cans.arc(200,150,100,0,Math.PI/2,false);

 

7. Circular block

 

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,false);   
  18.             cans.closePath();   
  19.             cans.lineWidth = 5;   
  20.             cans.strokeStyle = ‘red’;   
  21.             cans.stroke();   
  22.         }   
  23.     </script>  
  24.     <body onload=“pageLoad();”>  
  25.         <canvas id=“can” width=“400px” height=“300px”>4</canvas>  
  26.     </body>  
  27. </html>  

It is not explained here. As in the above example, linewidth controls the width of the line.

8. Circular gradient

 

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=“UTF-8”>  
  5.     </head>  
  6.     <style type=“text/css”>  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type=“text/javascript”>  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$(‘can’);   
  15.             var cancans = can.getContext(‘2d’);   
  16.             var gnt = cans.createRadialGradient(200,300,50,200,200,200);   
  17.             gnt.addColorStop(1,’red’);   
  18.             gnt.addColorStop(0,’green’);   
  19.             cans.fillStyle = gnt;   
  20.             cans.fillRect(0,0,800,600);   
  21.         }   
  22.     </script>  
  23.     <body onload=“pageLoad();”>  
  24.         <canvas id=“can” width=“800px” height=“600px”>4</canvas>  
  25.     </body>  
  26. </html>  

What needs to be explained here is the createradialgradient method. The parameters are (xstart, ystart, radiusstart, xend, yend, radiusend). In other words, when implementing gradient, it uses two circles, one is the original circle and the other is the gradient circle. In fact, many styles can be realized through coordinate and radius control, such as

Solid circle

 

XML/HTML CodeCopy contents to clipboard
  1. var gnt = cans.createRadialGradient(200,150,0,200,50,250);   
  2. gnt.addColorStop(0,’red’);   
  3. gnt.addColorStop(1,’#333′);