isPointInPath
methods
- This method determines whether the (x,y) points are on the path, returning true if they are on the path, false otherwise
- This method is mainly aimed atThe path, right
fillRect
There’s no effect here - This method applies to the current path. If the current path has multiple paths, this method applies only to the first subpath
Steps to draw a graph or image to the Canvas:
- Draw the image onto an infinitely large transparent bitmap
- Draws the shadows of the image onto another bitmap
- The alpha component of each pixel in the shadow is multiplied by the one set in the drawing environment
globalAlpha
Property value, which sets an opacity for each pixel - The above two bitmaps are combined for image synthesis, and the synthesis model parameters can be used during the operation
Drawing a rounded rectangle
- If no specific pixel is specified, it can pass
lineJoin
To make the corners round
Rect creates a closed path, but ARC does not. If another subpath exists, arc uses a line segment to connect the end of the existing path to the beginning of the arc. Rect can only be created clockwise, and ARC can change the direction of the path with parameters
The question is how do you make sure that you’re in between pixels
- Paths and subpaths
The junction of a line segment
When two line segments are connected, lineJoin = miter. You can use the miterLimit attribute to indicate the ratio of the length of the diagonal connection to the width of the half line. If the length of the tangent line exceeds this value. The browser draws the join points of the segments in beVEL mode
round
To create a rounded rectanglearcTo
To create a rounded rectanglelineTo
To create a rule-based multilateralism
Bessel curve
unfinished
Image and video
drawImage
parameterdrawImage(image,dx,dy)
- If no target canvas width is passed in, the image is drawn with its original default size
drawImage(image,dx,dy,dw,dh)
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
- In which the letter
d
The variable at the beginning refers to the target canvas, to the letters
The variable at the beginning refers to the source image - if
drawImage
Is passed in the video objectHTMLVideoElement
, the method is to draw the current video frame