Canvas — a summary


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
//Set the path of the drawing


3、 Basic use of canvas

  • Drawing of graphics

1-stroke ();

/*Draw parallel lines*/



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

Move forward and backward 0.5px


2-fill ();

/*1. Draw a triangle*/
    /*The starting point and the ending point of lineto cannot completely close the missing angle*/
    /*Automatic closure using canvas*/
    /*Close path*/

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*/
/*[5,10] arrays are used to describe how you arrange them*/
/*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;