JS manipulates the DOM to make a brush

JS manipulation of DOM is very undesirable, which will lead to the use of kink. Canvas is needed for drawing

Canvas

  • The Canvas tag has only two attributes, width and height
  • Canvas supports CSS to define size, but distortion blur distortion occurs

Code sample

Canvas width and height need JS to manipulate the tag attributes width and height

  • Cannot be written using CSS properties, it will stretch and blur the image
  • In the past, there was no CSS on the Web, only HTML. Canvas and IMG control the width and height in the way of HTML attributes
      let canvas = document.getElementById("canvas");
      // document.documentElement returns < HTML >
      
      canvas.width = document.documentElement.clientWidth; // These two sentences can effectively set canvas full screen
      canvas.height = document.documentElement.clientHeight;
      // Canvas {display:block}
Copy the code
  • Console debug document. The documentElement. ClientWidth value of time attention page zoom must is 100%;
    • Or you will produce with the document. The documentElement. ClientWidth with chrome bring up the console page value does not match the top right corner

Graphics rendering

There are two kinds of canvas drawing

  • Draw a rectangle
  • Draw graphics – all graphics except rectangles need to be drawn manually

From MDN

Draw a rectangle

  • fillRect

Draws a filled rectangle

  • strokeRect

Draws the border of a rectangle

  • clearRect

Clear the specified rectangle so that the clear portion is fully transparent.

To draw a graph is to draw a path

  • To draw a graph, draw a path first
  • Each figure is closed
  • A path is made up of many subpaths, all of which are in a list
  • Once the path is generated, you can render the shape by stroke or filling the path area

beginPath()

  • Create a path list
  • After each method call, the path list is cleared of reset, and a new graph can be redrawn
  • BeginPath () is usually followed by moveTo() almost always specify your starting position after setting the path

closePath()

  • After the path is closed, the graph drawing command points back to the context
  • Closed paths are not required. This method closes the graph by drawing a line from the current point to the starting point

stroke()

  • Use lines to draw the outline of a graph
  • Does not automatically close the graph

fill()

  • Generates solid graphics by filling the content area of the path
  • When you call fill(), all unclosed shapes are automatically closed, so you don’t need to call closePath(). But stroke() is not closed automatically

Check whether the current device is a touch screen or a mouse

  • Whether a browser supports touch screens can be determined by detecting the presence or absence of touch screen events
  • Ontouchstart, onTouchMove, onTouchEnd, onTouchCancel
"ontouchend" in document // Check whether the document object has the above four attributes
document.hasOwnProperty("ontouchstart") // Same as above, the second way
// console.dir(document) This way you can directly observe whether the document node has four attributes
Copy the code

Logic:

Mouse events are supported by all browsers, but touch phones can also be connected to an external mouse via USB OTG, so there is no way to determine whether a mouse event is a touch screen or a phone

LineCap – Drawing a line on canvas can cause jagged issues

MoveTo lineTo pit – refer to MDN lineCap for code examples