1. What is Canvas?
Canvas is the tag element of HTML5. JavaScript is used to draw images in canvas. A canvas is a rectangular area that you can control every pixel of. Canvas has a variety of ways to draw paths, rectangles, circles, characters and add images.
Ii. Why do WE need to learn Canvas?
We can use Canvas to draw complex graphics, process images, develop games, animate, process videos…
div+css
canvas
3. Create canvas elements
Use width and height to set the width and height of the canvas. The default value is 300 x 150. Note: Do not use CSS to set the canvas size, it will stretch out the image
<canvas id="myCanvas" width="200" height="100"></canvas>
Copy the codeCanvas is only supported by IE9 and other browsers such as Chrome, Firefox and Apple Browser.
<canvas ID ="myCanvas" width="200" height="100" > Your browser does not support canvas, please update your browser.Copy the codeCanvas context object Context
A Canvas cannot draw anything by itself. Canvas drawing is done using JavaScript. The Context object is the JavaScript interface to the Canvas. Use [CanvasElement].getContext(‘2d’) to get a 2D drawing context
let canvas = document.getElementById('myCanvas'); // Get canvas let CTX = canvas.getContext('2d'); // 2d: image 3D: webGLCopy the codeFive, the basic drawing path
[1] Canvas coordinate system and grid
The Canvas coordinate system is the x and y axis in the figure below. There are scales on the axis. The x axis gets bigger as you go to the right, and the Y axis gets bigger as you go down.
The grid is the 4 cells on the right, and each cell is a pixel with RGBA data.
The number of pixels is equal to the width of the canvas times the height
[2] Set the starting point for drawing (moveTo)
Syntax: ctx.moveto (x, y)
Explanation: Setting the starting point of the context drawing path is equivalent to moving the brush to a position
Parameters: x and y are relative to the top left corner of the canvas
Note: The starting point must be set before drawing a line segment
[3] Draw a line
Syntax: ctx.lineto (x, y)
Explanation: Draw a line from position X and y to the starting point or to the previous point
Parameters: coordinates of x and y line heads
[4] Start and close paths (beginPath and closePath)
Start path: ctx.beginPath()
ClosePath: ctx.closepath ()
Explanation: If you are drawing lines or shapes in different states, you must separate the different drawing operations by starting a new path. Closing the path automatically connects the last thread to the beginning thread
BeginPath: the core function is to isolate the shapes drawn differently. Each time this method is executed, it means to redraw a path. The ink stain drawn before can be set and managed separately
[5] Stroke
Grammar: CTX. Stroke ()
Explanation: Draw lines according to paths. Paths are just rough drafts, and to actually draw a line you must perform stroke
[6] Filling
Grammar: CTX. The fill ()
Fill is to fill the contents of the closed path with a specific color, black by default.
[7] Basic steps of Canvas drawing
Step 1: Get the context => canvaselem.getContext (‘2d’)
Step 2: Start path planning => ctx.beginPath()
Step 3: Move the starting point => ctx.moveto (x, y)
Step 4: Draw lines (rectangles, circles, pictures…) => ctx.lineTo(x, y)
Step 5: Close the path => ctx.closepath ()
Step 6: Draw stroke => ctx.stroke()
<body> <canvas id="canvas"></canvas> <script> // Create canvas const canvas = document.getelementById ('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // const CTX = canvas. GetContext ('2d'); Ctx. lineWidth = 10; // lineTo(x, y) ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(400, 50); ctx.lineTo(400, 300); ctx.stroke(); </script> </body>Copy the code
Six, rectangle drawing method
Rect (x, y, width, height)
Ctx.rect (x, y, width, height)
X and y are the coordinates of the upper left corner of the rectangle. Width and height are in pixels
Note: The rect method only plans the path of the rectangle, and does not fill or stroke
FillRect (x, y, width, height)
Ctx.fillrect (x, y, width, height)
X and y are the coordinates of the upper left corner of the rectangle. Width and height are in pixels
Note: After this method is executed. Immediately fill the current rectangle
[3] Stroke rectangle method: strokeRect(x, y, width, height)
Syntax: ctx.strokeRect(x, y, width, height)
X and y are the coordinates of the upper left corner of the rectangle. Width and height are in pixels
Note: This method draws the path immediately after it draws the stroke
ClearRect (x, y, width, height)
Syntax: ctx.clearrect (x, y, width, hegiht)
X and y are the coordinates of the upper left corner of the rectangle. Width and height are in pixels
Note: To clear the contents of a rectangle drawn is like erasing
<body> <canvas id="myCanvas"></canvas> <script> // Create canvas const canvas = document.getelementById ('myCanvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // const CTX = canvas. GetContext ('2d'); /* fillRect(x,y,w,h)*/ CTX. FillStyle = 'red'; ctx.fillRect(50, 50, 400, 200); Ctx. lineWidth = 10; StrokeRect (x,y,w,h)*/ CTX. StrokeStyle = 'yellow'; ctx.strokeRect(50, 50, 400, 200); /* clearRect(x,y,w,h)*/ / ctx.clearrect (50,50,400,200); </script> </body>Copy the code
Draw a circle
【1】 Circular method: CTX. Arc (x, Y, R, sAngle, eAngle, Counterclockwise)
Syntax: CTx. arc(x, y, r, sAngle, eAngle, Counterclockwise)
Explanation:
X y: center coordinates
R: radius
SAngle: Draw the initial radian, note radians not angles
EAngel: Ending radians, notice radians not angles
例 句 : True is counterclockwise, false is clockwise. Rad = deg* math.pi /180
<body> <canvas id="canvas"></canvas> <script> // Create canvas const canvas = document.getelementById ('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // const CTX = canvas. GetContext ('2d'); Ctx. lineWidth = 10; //arc(x,y, radius, start arc, end arc, direction) ctx.beginPath(); ctx.arc(200, 200, 100, 0, Math.PI * 3 / 2); ctx.stroke(); // arc(x,y, radius, start arc, end arc, direction) ctx.beginPath(); ctx.arc(400, 400, 100, 0, Math.PI / 2, true); ctx.closePath(); // Close path ctx.stroke(); </script> </body>Copy the code
Tangent arc
[1] Tangent arc method: CTX. ArcTo (x1, y1, x2, y2, r)
ArcTo (x1, y1, x2, y2, r)
Explanation:
X y: control point
R: radius
<body> <canvas id="canvas"></canvas> <script> // Create canvas const canvas = document.getelementById ('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // const CTX = canvas. GetContext ('2d'); Ctx. lineWidth = 10; // arcTo(x1,y1,x2,y2, radius) ctx.beginPath(); ctx.moveTo(50, 50); ctx.arcTo(400, 50, 400, 300, 100); ctx.stroke(); </script> </body>Copy the code
Bezier curve
QuadraticCurverTo (CPx1, CPY1, x, y) quadraticCurverTo(CPx1, CPY1, x, Y)
[2] Cubic Bezier curve: CTX. BezierCurverTo (CPX1, CPY1, CPX2, CPY2, x, y)
Syntax: ctx.bezierCurverTo(cpx1, cpy1, cpx2, cpy2, x, y)
Explanation:
Cpx1 CPY1: first control point
Cpx2 CPY2: second control point
X y: end point
<body> <canvas id="canvas"></canvas> <script> // Create canvas const canvas = document.getelementById ('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // const CTX = canvas. GetContext ('2d'); Ctx. lineWidth = 10; // quadraCurverTo(cpx1,cpy1,x,y) ctx.beginPath(); ctx.moveTo(50, 50); ctx.quadraticCurveTo(400, 50, 400, 300); ctx.stroke(); // bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y) ctx.beginPath(); ctx.moveTo(50, 300); ctx.bezierCurveTo(400, 50, 400, 600, 600, 300); ctx.stroke(); </script> </body>Copy the code
The article is updated every week. You can search “Front-end highlights” on wechat to read it in the first time, and reply to [Books] to get 200G video materials and 30 PDF books