HTML5 canvas provides a translate method, which can remap the (0,0) position on the canvas. When drawing a graph again, the position will be drawn relative to the new origin, resulting in the effect of displacement.
Related methods:
//Remap the (0,0) position on the canvas.
//x: value added to horizontal coordinate (x)
//y: value added to vertical coordinate (y)
context.translate(x, y);
The clip provided by HTML5 canvas can set the currently created path as the current clipping path method.
Cutting method:
//Convert the created path to a clipping path
context.clip();
context.clip(fillRule);
context.clip(path, fillRule);
/ / parameter:
// fillRule: this algorithm determines whether a point is in the path or out of the path.
// optional values:
// "nonzero": non-zero surround principle, default principle.
// "evenodd": the principle of even and odd surround.
// path: path2d path to be cut.
HTML5 canvas provides drawing pictures on canvas, which can draw some parts of the image and increase or decrease the size of the image.
//Draw a picture in (x, y) of the canvas
context.drawImage(img, x, y);
//Draw a picture in (x, y) of the canvas and set the width and height
context.drawImage(img, x, y, width, height);
//Cut the image and draw the image in (x, y) of the canvas
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
/ / parameter
//img: Specifies the image, canvas, or video to use.
//sx: optional. The X coordinate position where the cut starts.
//sy: optional. The Y coordinate position of the start cut.
//swidth: optional. The width of the cut image.
//sheight: optional. The height of the cut image.
//x: place the X coordinate position of the image on the canvas.
//y: place the Y coordinate position of the image on the canvas.
//width: optional. The width of the image to use. (stretch or shrink image)
//height: optional. The height of the image to use. (stretch or shrink image)
When we use the stroke method to draw the outgoing line, we can also control the line style through some methods.
Specific setting parameters:
//Sets or returns the end style of the line
//butt: default. Add a straight edge to each end of the line.
//round: adds a round cap to each end of the line.
//square: adds a square cap to each end of the line.
context.lineCap="butt|round|square";
//Sets or returns the corner type created when two lines intersect
//bevel: creates a bevel.
//round: creates a fillet.
//miter: default. Create sharp corners.
context.lineJoin="bevel|round|miter";
//Sets or returns the current line width
//Number: the width of the current line in pixels.
context.lineWidth=number;
//Set or return the maximum miter length
//number: positive. Specifies the maximum miter length. If the miter length exceeds the value of miterlimit, the corners are displayed as "bevel" type of linejoin.
context.miterLimit=number;
By creating a gradient object and assigning it to the context before drawing the figure, the color gradient effect can be achieved. The gradient effect can be used to fill rectangle, circle, line, text, etc.
Gradients in HTML5 canvas are divided into linear gradients and radial gradients (also known as diffusion gradients). Related methods:
//Create a linear gradient
//x0: X coordinate of the start point of the gradient
//y0: Y coordinate of the starting point of the gradient
//x1: X coordinate of gradient end point
//y1: Y coordinate of gradient end point
context.createLinearGradient(x0,y0,x1,y1);
//Create a radial gradient
//X coordinate of the starting circle of the gradient
//Y coordinate of the starting circle of the gradient
//Radius of start circle
//X coordinate of the end circle of the gradient
//Y coordinate of the end circle of the gradient
//Radius of end circle
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
//Increase the color and stop position in the specified gradient object
//Stop: a value between 0.0 and 1.0, indicating the position between the beginning and end of the gradient.
//Color: CSS color value displayed at the end
gradient.addColorStop(stop, color);
The gradient object created by createlineargradient and createradialgradient must use the addcolorstop() method to specify different colors and where to locate the colors in the gradient object.