HTML Canvas
The functions provided by HTML canvas are more primitive, suitable for pixel processing, dynamic rendering, and large data volume drawing
What is HTML canvas
HTML5 The <canvas> tag is used to dynamically draw graphics through scripts (usually JavaScript).
However, the <canvas> element does not have its own drawing capabilities (it is just a container for graphics)-It is necessary to use scripts to actually draw the graphics.
The getContext() method returns an object that provides methods and properties for drawing on the canvas.
This reference will introduce getContext("2d") objects' properties and methods, which can be used to draw text, lines, boxes, circles, and more on the canvas
Browser support
IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome, and Safari support the properties and methods of the <canvas> tag.
Note:Internet Explorer 8 and earlier IE versions do not support the <canvas> element.
Color, style, and shadow
| Property | Description |
| fillStyle | Set or return the color, gradient, or pattern for the fill. |
| strokeStyle | Set or return the color, gradient, or pattern for the stroke. |
| shadowColor | Set or return the color of the shadow. |
| shadowBlur | Set or return the blur level for the shadow. |
| shadowOffsetX | Set or return the horizontal distance of the shadow from the shape. |
| shadowOffsetY | Set or return the vertical distance of the shadow from the shape. |
Specify the color and stop position in the gradient object.
Set or return the maximum miter length.
Path
| Method | Description |
| fill() | Fill the current drawing (path). |
| stroke() | Draw the defined path. |
| beginPath() | Start a new path or reset the current path. |
| moveTo() | Move the path to a specified point on the canvas without creating a line. |
| closePath() | Create a path from the current point back to the starting point. |
| lineTo() | Add a new point and then create a line from this point to the last specified point on the canvas. |
| clip() | Cut out any shape and size of an area from the original canvas. |
| quadraticCurveTo() | Create a quadratic Bezier curve. |
| bezierCurveTo() | Create a cubic Bezier curve. |
| arc() | Create an arc./Curve (used to create a circle or part of a circle). |
| arcTo() | Create an arc between two tangents./Curve. |
| isPointInPath() | Returns true if the specified point is in the current path, otherwise returns false. |
Transformation
| Method | Description |
| scale() | Scale the current drawing to make it larger or smaller. |
| rotate() | Rotate the current drawing. |
| translate() | Remap the (0,0) position on the canvas. |
| transform() | Replace the current transformation matrix for drawing. |
| setTransform() | Reset the current transformation to the unit matrix. Then run transform(). |
Text
| Property | Description |
| font | Set or return the current font properties used for text content. |
| textAlign | Set or return the current alignment of the text content. |
| textBaseline | Set or return the current text baseline used for drawing text. |
| Method | Description |
| fillText() | Draw "filled" text on the canvas. |
| strokeText() | Draw text on the canvas without fill. |
| measureText() | Returns an object containing the width of the specified text. |
Image drawing
| Method | Description |
| drawImage() | Draw an image, canvas, or video onto the canvas. |
Pixel operations
| Property | Description |
| width | Return the width of the ImageData object. |
| height | Return the height of the ImageData object. |
| data | Return an object that contains the image data of the specified ImageData object. |
| Method | Description |
| createImageData() | Create a new, blank ImageData object. |
| getImageData() | Return an ImageData object, which contains the image data of the specified rectangle on the canvas. |
| putImageData() | Put image data (from the specified ImageData object) back onto the canvas. |
Composition
| Property | Description |
| globalAlpha | Set or return the current alpha or transparency value for drawing. |
| globalCompositeOperation | Set or return how a new image is drawn onto an existing image. |
Others
| Method | Description |
| save() | Save the current environment state. |
| restore() | Return the path state and properties previously saved. |
| createEvent() | |
| getContext() | |
| toDataURL() | |