<canvas> is an HTML element that can be drawn using scripts (usually js)
< canvas > WebKit was first introduced by Apple and used in Dashboard and Safari of Mac OS X
Today, all major browsers support it (IE9+, lower versions need to introduce Explorer Canvas to support)
1. Start drawing (rendering context)The <canvas> element creates a fixed-size canvas on which the rendering context CanvasRenderContext2D can be used to draw and process the content to be displayed.
To draw on canvas, you must first obtain the CanvasRenderContext2D2d rendering context. (This refers to 2D, not talking about webgl)
const canvas = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);Example
2. Properties of CanvasRenderContext2D:You can specify the style of the drawing by setting the properties of the context.
All properties are as follows:
| property | Introduction |
|---|---|
| canvas | canvas element |
| fillStyle | The current color, mode, or gradient used to fill the path |
| font | Font style |
| globalAlpha | Specifies the opacity of content drawn on the canvas |
| globalCompositeOperation | Specify how a color is combined with colors already on the canvas (compositing) |
| lineCap | Specifies how the ends of the line are drawn |
| lineDashOffset | Set dash offset |
| lineJoin | Specify how two lines are connected |
| lineWidth | Specifies the line width for brush (line drawing) operations |
| miterLimit | When the lineJoin attribute is miter, this attribute specifies the maximum ratio of the diagonal join length to the line width. |
| shadowBlur | Blur effect level |
| shadowColor | shadow color |
| shadowOffsetX | Shadow horizontal offset distance |
| shadowOffsetY | Shadow vertical offset distance |
| strokeStyle | Colors, modes, and gradients for brush (draw) paths |
| textAlign | text alignment |
| textBaseline | Text vertical alignment |
The width and height of the Canvas need to be specified using the attribute values width and height.
If not specified, the default size of the Canvas is 300×150
The width and height specified by the style are only the display size of the canvas element, not the size of the drawing environment.
canvas {width: 1000px;height: 600px;}<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = red;ctx.fillRect(10, 10, 100, 100); Width and height exampleWhy are the styles set to the same size but displayed completely differently?
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.