It is also possible to directly insert a picture in the canvas. If you want to insert a picture in the canvas, you must first load a picture with js. After the picture is loaded, we can use the canvas API to insert it into the canvas. First load a picture with js
const myImg = new Image()
myImg.sec = './01 Xiaofeng.png'
// prepare a loaded event
myImg.onload = function () { console.log(this) // this here is this image content }
In this way, we get a picture content, which is the syntax of JS, and has nothing to do with canvas.
Next, you can use the canvas API to insert the loaded image onto the canvas
Syntax: toolbox.drawImage(image content, starting point x coordinate, starting point y coordinate, width, height)
// 0. Get the canvas tag element node on the page
const canvasEle = document.querySelector('#canvas')
// 1. Get the toolbox of the current canvas
const ctx = canvasEle.getContext('2d')
// 2. Load the image
myImg.sec = './01 Xiaofeng.png'
// Prepare a loaded event
myImg.onload = function () { console.log(this) // this here is the image content
**// 3. 插入到画布内**
ctx.drawImage( this, 100, 100, 236, 368 )
}
In this way, the picture is inserted on the page
Note: If the width and height you set do not match the size of the picture, the picture will be scaled according to your preset size.
Understand the concept of Bezier curve
:
Bezier curve (Bezier curve) is a very important parametric curve in computer graphics. It describes a curve through an equation. According to the highest order of the equation, it is divided into linear Bezier curve , quadratic Bezier curves, cubic Bezier curves, and higher order Bezier curves.
The Bezier curve needs to provide parameters of several points, first is the starting point and end point of the curve, if the number of control points is 0, we call it a linear Bezier curve; if the number of control points is 1, it is a second-order Bezier curve ; If the number of control points is 2, it is a third-order Bezier curve, and so on.
We commonly use the second-order and third-order curves, and there are fewer other, more complex Bezier curves. We need to use tools to measure and calculate them. Let’s first look at the second-order Bezier curves. In fact, they are composed of three Points are drawn as two lines, and then we will start at the beginning of each line at the same time, and move to the end point proportionally to get a point. These points are then reconnected to produce n - 1 straight lines.
In this way, we continue the same operation until it becomes a straight line, and then we get a point proportionally, which is the point where the curve passes. When we increase the scale a little bit (from 0 to 1), we get all the points in the middle of the curve, and finally draw a complete curve.
Let's take a look at the third-order Bezier curve, which is the same as the second-order Bezier curve, but the number of control points has become two.
This thing seems difficult, but in fact, we don't need to go point by point when drawing Calculate, canvas provides us with the corresponding API
to draw the second-order Bezier curve.
We first use the line segment inside the canvas to describe the shape of a second-order Bezier curve // 0. Get the canvas label element node const
on the page
canvasEle = document. querySelector('#canvas')
// 1. Get the toolbox of the current canvas
const ctx = canvasEle.getContext('2d')
// 2. Draw and measure the shape of the line segment of the Bezier curve
ctx.moveTo(20, 170)
ctx.lineTo(130, 40)
ctx.lineTo(180, 150)
ctx.stroke()
These are the three we preset An angle drawn by the points, and then we draw a Bezier curve on this basis
// 0. Get the canvas label element node on the page
const canvasEle = document.querySelector('#canvas')
// 1. Get the toolbox of the current canvas
const ctx = canvasEle.getContext('2d')
// 2. Draw and measure the shape of the line segment of the Bezier curve
ctx.moveTo(20, 170)
ctx.lineTo(130, 40)
ctx.lineTo(180, 150)
ctx.stroke()
// 3. Draw the second-order Bezier term
ctx.beginPath()
ctx.moveTo(20, 170) // Starting point, draw point p0
// Syntax: ctx.quadraticCurveTo(p1 x coordinate, p1 y coordinate, p2 x coordinate, p2 y coordinate)
ctx.quadraticCurveTo(130, 40, 180, 150)
ctx.strokeStyle = 'red'
ctx.stroke()
This red curve is a second-order Bezier curve. Just cancel the line segment set for observation
// 0. Get the canvas label element node on the page
const canvasEle = document.querySelector('#canvas')
// 1. Get the toolbox of the current canvas
const ctx = canvasEle.getContext('2d')
// 2. Draw the second-order Bezier term
ctx.beginPath()
ctx.moveTo(20, 170) // Starting point, draw point p0
// Syntax: ctx.quadraticCurveTo(p1 x coordinate, p1 y coordinate, p2 x coordinates, p2 y coordinates)
ctx.quadraticCurveTo(130, 40, 180, 150)
ctx.strokeStyle = 'red'
ctx.stroke()
drawing a third-order Bezier curve
is actually the same as a second-order Bezier curve, except that The point we describe is just one more point, as before, let's describe a preset line segment first, for observation //
0. Get the canvas tag element node on the page
const canvasEle = document.querySelector('# canvas')
// 1. Get the toolbox of the current canvas
const ctx = canvasEle.getContext('2d')
// 2. Draw and measure the shape of the line segment of the Bezier curve
ctx.moveTo(25, 175)
ctx.lineTo(60, 80)
ctx.lineTo(150, 30)
ctx.lineTo(170, 150)
ctx.stroke()
Next, start drawing the third-order Bezier curve according to our preset points
// 0. Get the canvas label element node on the page
const canvasEle = document.querySelector('#canvas')
// 1. Get the toolbox of the current canvas
const ctx = canvasEle.getContext('2d')
// 2. Draw and measure the shape of the line segment of the Bezier curve
ctx.moveTo(25, 175)
ctx.lineTo(60, 80)
ctx.lineTo(150, 30)
ctx.lineTo(170, 150)
ctx.stroke()
// 3. Draw a third-order Bezier curve according to the path described above
ctx.beginPath()
ctx.moveTo(25, 175) // Starting point, describe the point p0
// Syntax: ctx.bezierCurveTo(p1 x, p1 y, p2 x, p2 y, p3 x, p3 y)
ctx.bezierCurveTo(60, 80, 150, 30, 170, 150)
ctx.strokeStyle = 'red'
ctx.stroke()
At this time, a third-order Bezier curve is Appeared, is not quite simple.