Drawing steps

1. html Add canvas label , Usually need to specify id width（ Default 300px） height（ Default 150px）

    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
   

   The width and height must be within HTML In the definition of , Can't be in CSS In the definition of （ Unable to get canvas Object to get the correct width and height ）

2. obtain canvas object

   var cnv = document.getElementById("canvas");
   

   You can get by defining a DOM Functions of object elements $$(id), Reduce the amount of duplicate code

   function $$(id){
         
        return document.getElementById(id);
   }
   var cnv = $$("canvas");
   

3. Get context object context

   var cxt = cnv.getContext("2d");
   

4. Began to draw

   cxt.moveTo(50, 100);
   cxt.lineTo(150, 50);
   cxt.stroke();
   

A straight line

Method	explain
moveTo(x1, y1)	Move the brush to the target position (x1, y1)
lineTo(x2, y2)	Describe the movement trajectory of the brush ： From the current position of the brush , Draw a straight line until the end position (x2, y2)
stroke()	Draw line

//  The starting point 
cxt.moveTo(x1, y1);
//  End 
cxt.lineTo(x2, y2);
//  attachment 
cxt.stroke();

Multiple lines

cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.moveTo(50,100);
cxt.lineTo(100,100);
cxt.stroke();

cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(50,100)
cxt.lineTo(100,100);
cxt.stroke();

triangle

 cxt.moveTo(50, 100);
 cxt.lineTo(150, 50);
 cxt.lineTo(150, 100);
 cxt.lineTo(50, 100);
 cxt.stroke();

polygon

Like a triangle , need moveTo,lineTo,stroke Drawing , Like the arrow ：

arrow

            cxt.moveTo(40, 60);
            cxt.lineTo(100, 60);
            cxt.lineTo(100, 30);
            cxt.lineTo(150, 75);
            cxt.lineTo(100, 120);
            cxt.lineTo(100, 90);
            cxt.lineTo(40, 90);
            cxt.lineTo(40, 60);
            cxt.stroke();

Regular polygon

According to the characteristics of regular polygon , You can encapsulate a function that specially draws regular polygons

        /* * n： Express n Edge shape  * dx、dy： Express n The coordinates of the center of the edge  * size： Express n The size of the edge  */
        function createPolygon(cxt, n, dx, dy, size) {
    
            cxt.beginPath();
            var degree = (2 * Math.PI )/ n;
            for (var i = 0; i < n; i++) {
    
                 var x = Math.cos(i * degree);
                 var y = Math.sin(i * degree);
                 cxt.lineTo(x * size + dx, y * size + dy);
            }
            cxt.closePath();
        }

• cxt.beginPath() Used to start a new path
• cxt.closePath() Used to close the path .

The effect is as follows ：

            createPolygon(cxt, 3, 100, 75, 50);
            cxt.fillStyle = "HotPink";
            cxt.fill();

createPolygon(cxt, 4, 100, 75, 50);

createPolygon(cxt, 5, 100, 75, 50);

createPolygon(cxt, 6, 100, 75, 50);

Five-pointed star

cxt.beginPath();
for (var i = 0; i < 5; i++) {
    
cxt.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * 50 + 100,
          -Math.sin((18 + i * 72) * Math.PI / 180) * 50 + 100);
cxt.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * 25 + 100,
          -Math.sin((54 + i * 72) * Math.PI / 180) * 25 + 100);
}
cxt.closePath();
cxt.stroke();

rectangular

Stroke rectangle

cxt.strokeStyle =  Property value ;
cxt.strokeRect(x,y,width,height);

here strokeStyle Must be in strokeRect Before （ Before drawing , You need to select a brush first ）

strokeStyle Used to specify the line style , Attribute values can be color values 、 Gradients and patterns

cxt.strokeStyle = "#FF0000";            // Hex color value 
cxt.strokeStyle = "red";                // Color keywords 
cxt.strokeStyle = "rgb(255,0,0)";       //rgb Color value 
cxt.strokeStyle = "rgba(255,0,0,0.8)";  //rgba Color value 

strokeRect The schematic diagram of the method is as follows ,（x,y） Is the coordinates of the upper left corner of the rectangle ,width Is the width of the rectangle 、height Is the height of the rectangle

 cxt.strokeStyle = "red";
 cxt.strokeRect(50, 50, 80, 80);

or

cxt.strokeStyle="red";
cxt.rect(50,50,80,80);
cxt.stroke();

rect() After call , It doesn't draw a rectangle . You also need to call stroke() perhaps fill() Method , Will draw the rectangle .

Filled rectangle

cxt.fillStyle= Property value ;
cxt.fillRect(x, y, width, height);

here fillStyle Must be in fillRect Before （ Before drawing , You need to select a brush first ）

fillStyle Used to specify the fill pattern , Attribute values can be color values 、 Gradients and patterns
fillRect The schematic diagram of the method is as follows ,（x,y） Is the coordinates of the upper left corner of the rectangle ,width Is the width of the rectangle 、height Is the height of the rectangle

cxt.fillStyle = "HotPink";
cxt.fillRect(50, 50, 80, 80);

or

cxt.fillStyle="HotPink";
cxt.rect(50,50,80,80);
cxt.fill();

Draw through multiple lines （ Not recommended ）

 cxt.moveTo(50, 100);
 cxt.lineTo(50,50); 
 cxt.lineTo(150, 50);
 cxt.lineTo(150, 100);
 cxt.lineTo(50, 100);
 cxt.stroke();

Empty rectangle

cxt.clearRect(x, y, width, height);

That is, the effect of hollowed out rectangle

cxt.fillStyle = "HotPink";
cxt.fillRect(50, 50, 80, 80);
cxt.clearRect(60, 60, 50, 50);

Empty the whole canvas

cxt.clearRect(0, 0, cnv.width, cnv.height);

palette

Checkered palette

            for (var i = 0; i < 6; i++) {
    
                 for (var j = 0; j < 6; j++) {
    
                     cxt.fillStyle = "rgb(" + Math.floor(255 - 42.5 * i) + "," + Math.floor(255 - 42.5 * j) + ",0)";
                      cxt.fillRect(j * 25, i * 25, 25, 25);
                 }
            }

Gradient palette

 var r = 255, g = 0, b = 0;
 for (i = 0; i < 150; i++) {
    
      if (i < 25) {
    
            g += 10;
      } else if (i > 25 && i < 50) {
    
            r -= 10;
      } else if (i > 50 && i < 75) {
    
            g -= 10;
            b += 10;
      } else if (i >= 75 && i < 100) {
    
            r += 10;
      } else {
    
            b -= 10;
      }
      cxt.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
      cxt.fillRect(3 * i, 0, 3, cnv.height);
}