Example of using Canvas to draw curves in HTML5: Circle, arc, and besell

The drawing curve has the following four methods: Arc (), Artto (), Beziercurveto (), and Quadraticcurveto ().
The first is relatively simple, is to draw a circular arc. The next three methods are a bit more complex, and you need to define control points.

1,arc () Draw an arc

An arc is a part of a circle. To draw an arc, you must determine the coordinates of the circle, the radius of the circle, the starting angle of the arc, and the endpoint angle.
The starting angle and end point angle are expressed in radians, that is, the multiple of the constant Pi (1pi is semicircle, 2pi is the whole circle).

(1) Use the Arc () method below to draw a circular arc:

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Context.linewidth = 10;
Context.strokestyle = "#cd2828";

Create variables, save all aspects of the arc information
var CenterX = 200;
var centery = 100;
var radius = 80;
var startingangle = 0 * MATH.PI;
var endingangle = 1.5 * MATH.PI;

To draw an arc using determined information
Context.arc (CenterX, CenterY, radius, StartingAngle, endingangle);
Context.stroke ();

(2) If you call Closepath () before calling stroke (), you draw a straight line between the beginning and end of the arc to get a closed little semicircle.

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Context.linewidth = 10;
Context.strokestyle = "#cd2828";

Create variables, save all aspects of the arc information
var CenterX = 200;
var centery = 100;
var radius = 80;
var startingangle = 0 * MATH.PI;
var endingangle = 1.5 * MATH.PI;

To draw an arc using determined information
Context.arc (CenterX, CenterY, radius, StartingAngle, endingangle);
Context.closepath ();
Context.stroke ();

(3) If you want to draw an entire circle, the starting angle is set to 0, the endpoint angle is set to 2PI.

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Context.linewidth = 10;
Context.strokestyle = "#cd2828";

Create variables, save all aspects of the arc information
var CenterX = 200;
var centery = 100;
var radius = 80;
var startingangle = 0 * MATH.PI;
var endingangle = 2 * MATH.PI;

To draw an arc using determined information
Context.arc (CenterX, CenterY, radius, StartingAngle, endingangle);
Context.stroke ();

2,beziercurveto () to draw Bezier curves

Bezier curves are popular because they guarantee smoothness, even small, large radians.
A Bezier curve has two control points. The start tangent of the curve joins the first control point, and the endpoint tangent joins the second control point. The curve is between the two lines of connection.
The bending degree (curvature) of a curve is determined by the distance from the control point to the starting and ending points. The farther the distance is, the greater the curvature (a bit like gravity, but the farther the force is).

(1) Draw a Bezier curve below (the first control point is placed on the starting point and the second control point is below the end point)

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Context.linewidth = 10;
Context.strokestyle = "#cd2828";

Move the pen to the starting position
Context.moveto (20, 150);

Create variables, save two control points and curve endpoint information
var control1_x = 187;
var control1_y = 0;
var control2_x = 429;
var control2_y = 380;
var endpointx = 365;
var endpointy = 50;

Drawing curves
Context.beziercurveto (control1_x, control1_y, control2_x, control2_y, Endpointx, Endpointy);
Context.stroke ();

(2) online generation of Bezier curves
Address: http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
We can drag the control point, start point, and end point to arbitrarily change the shape of the Bezier curve. At the same time, the right side will generate the corresponding HTML5 drawing code in real time, what is really WYSIWYG.