Canvas

1. The concept:

  • Chinese “canvas, canvas”
  • HTML5 is a tag that can be used to draw graphics, images and animation through scripting language.

2. Basic usage

  • Create the Canvas tag and specify the Canvas size. Default is 300px by 150px.
  • If you want to change the width and height dynamically, you must change it through its property nodes width and height, not CSS styles.
  • Canvas object acquired through JS does not have drawing ability.
  • Get the drawing API method by calling the getContext method
  • Use the obtained drawing tools to draw graphs.

3. GetContext method

  • Grammar: canvas object. GetContext (” 2 d | | webgl “);
  • Function: get drawing plane graphics or three-dimensional graphics API method and related attributes; 2D: obtain the tool for drawing plane graphics. Webgl: obtain the tool for drawing stereo graphics.

4. Basic drawing API

* ctx.storkeRect(x,y,width,height;) * ctx.moveTo(x,y); Moves the stroke to the specified point. * ctx.lineTo(x,y); Line from stroke point to specified point * ctx.stroke(); Draws a graph of the current path, drawing its border. * ctx.fill(); Fill the closed graph. Form the current path into a closed graph, and then fill it.Copy the code
  • Open a new path method
    • ctx.beginPath();
  • Closed path method
    • ctx.closePath();
    • If the current path does not form a closed graph, you can call this method to close the graph.
      • Note: beginPath() and closePath() do not appear in pairs.

5. Non-zero surround principle

  • It is used to determine whether a closed area should be filled.
  • If you want to determine whether the specified area is filled, you select any point in the area and draw a ray from that point through the entire graph to the outside. Look at the line where the ray intersects the graph. If the line intersects the ray clockwise, count +1. If the line intersects the ray counterclockwise, count -1.