Canvas — a summary

Time:2021-4-16

1、 What is canvas?

The canvas element of HTML5 uses JavaScript to draw images on Web pages;

Canvas is a rectangular area, which can control every pixel;

Canvas has many ways to draw paths, rectangles, circles, characters and add images

Application of canvas—It is mainly data visualization

 

2、 Basic drawing experience of canvas

  • Create canvas element

Add canvas element in HTML5 page, specify ID, width and height of element (default width and height 300 * 150): 1

  • Canvas coordinate system

  

  • Drawing through JavaScript
//Get element
var myCanvas=document.querySelector("canvas");
//Get drawing tools
var ctx=myCanvas.getContext("2d");
//Set the starting position of the drawing
ctx.moveTo(x0,y0);
//Set the path of the drawing
ctx.lineTo(endX,endY);
//Stroke
ctx.stroke();

 

3、 Basic use of canvas

  • Drawing of graphics

1-stroke ();

/*Draw parallel lines*/
    ctx.moveTo(100,100.5);     
    ctx.lineTo(300,100.5);
    
    ctx.moveTo(100,200);
    ctx.lineTo(300,200);

    /*Stroke*/
    ctx.stroke();

Note:

1. The problem of line

The default width of the line is 1px and the default color is black

Problems caused by:

The aligned point is the center of the line, which will divide the line into two parts. 0.5px shows that it will increase the width unsaturated

Solution:
Move forward and backward 0.5px

 

2-fill ();

/*1. Draw a triangle*/
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    /*The starting point and the ending point of lineto cannot completely close the missing angle*/
    /*Automatic closure using canvas*/
    //ctx.lineTo(100,100);
    /*Close path*/
    ctx.closePath();
    //ctx.fill();

Note: manual closing: the start point and the end point of lineto cannot completely close the missing angle

Automatic closure using canvas—ctx.closePath();

Open a new path:cyx.beginPath();–When you need to draw paths with different styles, open a new path to avoid overlapping styles

Filling rule: non zero wrapping — pull a line out of the filling area you need to judge, and there will be several lines intersecting with it to see the track intersecting with it; if it is clockwise intersection plus 1, counterclockwise intersection minus 1; add up the judged number, if it is equal to 0, then the area will not be filled, if it is not equal to 0, then it will be filled.

 

  • Set style

The state of the brush:

Line width, default 1px;

Linecap line end type: (but default), round (round end), square (flat end)

The inflection point of the intersection line: (miter default – sharp end), round (round end), and level (flat end)

The color of the strokestyle line

FillStyle fill color

Setlinedash() sets the dotted line — the parameter is an array(Arrays are used to describe how you arrange them

Getlinedash() gets the set of dashed line widths(Get the arrangement of the dotted line; get the arrangement of the segment that is not repeated

Linedashoffset sets the offset of the dashed line (the negative value is offset to the right)

 

/*Draw a line*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
/*[5,10] arrays are used to describe how you arrange them*/
ctx.setLineDash([4,10,20]);
/*Get the arrangement of the dotted line to get the arrangement of the segment that is not repeated*/
// console.log(ctx.getLineDash());
/*If it's positive, the value moves back*/
/*If it's negative, the value moves forward*/
// ctx.lineDashOffset = -20;
ctx.stroke();