Sultry Canvas

3.1 Curve graphics in Canvas

The difference between a curve and an arc: Every point on an arc has the same curvature, that is, the point on an arc is on a circle, but not necessarily on a curve. A curve can have its own trajectory, and a curve includes an arc.

3.1.1 Drawing of circles

API:

  • BeginPath (): indicates the start path
  • The arc (x, y, r, beginAngle endAngle, anticlockwise) : parameters, respectively Center coordinates of starting point, end point of view, whether counterclockwise. The default is false, which is the default drawn clockwise.
  • ClosePath (): Close the path, which forms a closed graph. If closePath is not used to close the path, the drawn graph is an arc.

About the Angle

Both the starting and ending angles are expressed in radians, i.e. 90° is 90 * math.pi / 180, and both the starting and ending angles are included in the positive and negative directions of the X-axis.

Steps for drawing circles and arcs

Draw closed circle: Start path, define circle/half circle, close path, Stroke/Fill, so draw a closed circle/half circle. Draw the arc: start the path, define the arc, stroke, draw the arc does not need to close the path, just define the arc and stroke immediately.

Stroke round

<body> <canvas id="circle1" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function() { var circle1 = document.getElementById('circle1') var ctx1 = Circle1.getcontext ('2d') ctx1.beginpath () ctx1.arc(100,100,50,0,90* math.pi / 180) ctx1.closepath () // stroke circle ctx1.strokeStyle = "red" ctx1.stroke() </body>Copy the code

The effect displayed in the browser

Fill the circle

<body> <canvas id="circle1" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function() { var circle1 = document.getElementById('circle1') var ctx1 = Circle1.getcontext ('2d') ctx1.beginpath () ctx1.arc(100,100,50,0,90* math.pi / 180) ctx1.closepath () // fill the circle ctx1.fillstyle  = "red" ctx1.fill() </body>Copy the code

Preview effect in the browser

Matters needing attention:

Once a circle is defined, it will not appear unless it is filled or stroked, because it will be drawn

Draw a complete circle

<body> <canvas id="circle1" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function() { var circle1 = document.getElementById('circle1') var ctx1 = Circle1.getcontext ('2d') ctx1.beginpath () ctx1.arc(100,100,50,0,360 * math.pi / 180) ctx1.closepath () // fill the circle ctx1.fillStyle = "red" ctx1.fill() </body>Copy the code

Preview the effect in the browser

3.1.2 Arc drawing

API:

  • Arc (x, y, r, beginAngle endAngle, anticlockwise), respectively Center coordinates of starting point, end point of view, whether counterclockwise. The default is false, which is the default drawn clockwise
  • arcTo(cx,cy,x2,y2,r): Parameters respectively control point coordinates and end coordinates and radius of the methods is through the moveTo method is used to define a starting point, and then the starting point, end points are respectively connected to the control points into edge forming Angle, on both sides of the circular arc is a with arc tangent and the radius r, arcTo () method draw arc is the shortest arc length between two tangent point. If the starting point is not the beginning of the arc, the arcTo() method also adds a straight line segment from the current endpoint to the beginning of the arc. In other words, the starting point coordinates are not necessarily the starting point coordinates of the arc, as shown in the figure:.

Draw an arc using the Arc method

<body> <canvas id="circle1" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function() { var circle1 = document.getElementById('circle1') var ctx1 = Circle1.getcontext ('2d') ctx1.beginpath () ctx1.arc(100,100,50,0,90 * math.pi / 180) // fill the circle ctx1.strokestyle = "blue" ctx1.stroke() </body>Copy the code

Preview effect in the browser

Draw circles using the arcTo method

<body> <canvas id="circle1" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function() { var circle1 = document.getElementById('circle1') var ctx1 = Circle1.getcontext ('2d') ctx1.moveto (100,160) ctx1.lineto (140,160) ctx1.stroke() ctx1.arcto (160,160,160,190,20) circle1.getContext('2d') ctx1.moveto (100,160) ctx1.lineto (140,160) ctx1.stroke() ctx1.arcto (160,160,160,190,20) Ctx1 ctx1. LineTo (160210). The stroke () < / body >Copy the code

Preview effect in the browser

Rounded rectangle drawing

<body> <canvas id="canvas" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas') Var CTX = canvas.getcontext ('2d') ctx.moveto (50,50) ctx.lineto (160,50) ctx.arcto (190,50,190,80,30) ctx.moveto (190,80,30) Ctx.lineto (160,150) ctx.moveto (160,150) ctx.lineto (50,150) ctx.arcto (20,150, 120) ctx.arcto (160,150) ctx.moveto (160,150) ctx.lineto (50,150) ctx.arcto (20,150, 120) ctx.arcto (20,150, 120) ctx.moveto (160,150) ctx.arcto (20,150, 120) ctx.arcto (20,150, 120) Ctx.moveto (20,120) ctx.lineto (20,80) ctx.arcto (20,50,50, 30) ctx.stroke() </body>Copy the code

Preview the effect in the browser

See this is not instantly feel border-radius extra fragrant………

These are the ways to draw circles or arcs, so how do you draw how do you draw a curve? Something like this:

This kind of curve can be drawn in the way of Bezier curve.

3.1.3 Curve drawing

Bessel curve: bezier curve is a curve used for 2 d graphics application mathematics, students should know that we can contact with CSS using bezier curve to the adjustment of the animation, its application is broad, is involved in any kind of drawing system will, so master the bezier curve is very important

Quadratic Bessel curve

API: -quadraticCurveTo(Cx, CY, ENDx, ENDY): The parameters of a quadratic Bessel curve are similar to arcTO, but it does not require a radius, as shown in figure:

<body> <canvas id="canvas" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas')  var ctx = canvas.getContext('2d') ctx.moveTo(100, 100) ctx.quadraticCurveTo(200, 100, 50, 150) ctx.stroke() </body>Copy the code

Preview effect in the browser

Note: Quadratic Bezier curves only provide control points and end points. The starting points need to be provided by ourselves via moveTo or lineTo

Cubic Bezier curves

In the canvas, we can also draw the curve through the cubic Bezier curve, and a control point is added on the basis of the cubic Bezier curve, as shown below:

A cubic Bezier curve is a curve with four points that adjust the curvature of the curve. Its starting point is also provided by moveTo or lineTo.

API:

  • BezierCurveTo (CX1, CY1, CX2, CY2, EX, EY): corresponding to control point 1, control point 2, end point respectively.
<body> <canvas id="canvas" width="500" height="700" style="border: 1px solid red;" ></canvas> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas') Var CTX = canvas.getcontext ('2d') // ctx.moveto (20,80) ctx.beziercurveto (20,20,120,120, 60) ctx.stroke() </body>Copy the code

Preview effect in the browser

For curve drawing, please refer to HTML 5 Canvas for corresponding API, lines and text