Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to draw various lines with Canvas in HTML5". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Everything in this article assumes that you have already obtained the Canvas object, which means that you have included the following code in your page:

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

In this section, we focus on the path(), fill(), and stroke() methods and their associated properties.

This article will describe in detail how to draw various types of lines with canvas, that is, straight lines, polylines, arcs and curves, and provide the corresponding code as a reference.

1. straight line

A straight line is a line segment from point A to point B. Example code for drawing a line is as follows:

ctx.strokeStyle ="FF0000"; //The color of the line is red

ctx.lineWidth=2; //lineWidth is 2 pixels

ctx. initialPath (); //initialPath

ctx.moveTo(10, 10); //Give the path a starting point

ctx.lineTo(100, 100); //Give the path an endpoint

ctx.stroke();

ctx.closePath(); //Close Path

2. fold line

A polygon is a line segment from point A to point B to point C. Example code for drawing polylines is as follows:

ctx.strokeStyle ="FF0000"; //The color of the line is red

ctx.lineWidth=2; //lineWidth is 2 pixels

ctx. initialPath (); //initialPath

ctx.moveTo(10, 10); //Give the path a starting point

ctx.lineTo(400, 400); //Give the path an endpoint

ctx.moveTo(400, 400); //inherit from previous start

ctx.lineTo(200, 300); //Give the path another endpoint

ctx.stroke();

ctx.closePath(); //Close Path

3. arc

An arc is a circular arc with a radius of B and an angle of C degrees from point A. Example code for drawing arcs is as follows:

ctx.strokeStyle ="FF0000"; //The color of the line is red

ctx.lineWidth=2; //lineWidth is 2 pixels

ctx.arc(200,200,100,0,Math.PI*(1/2),false);

//Draw an arc of 90°, Math.PI equals 180° semi-circle

//arc angles are in radians instead of degrees, and direct conversions between degrees and radians can be made using this expression: var radians =

//(Math.PI/180)*degrees。

//Parameter description (x,y, radius, starting angle, ending angle, whether it is displayed counterclockwise), where (x,y) is the center coordinate

ctx.stroke();

Note that the detailed working diagram of the arc method in the above code is as follows:

4. curve

A curve is a complex combination of arcs involving three methods: arcTo(), quadraticCurveTo(), bezier-CurveTo().

This section only covers arcTo(), quadraticCurveTo() and bezierCurveTo().

The arcTo() method draws an arc tangent to two rays, one ray passing through the rendering context drawing start point and ending at (x1, y1), and the other ray passing through (x2, y2) and ending at (x1, y1), which is the smallest arc tangent to the two rays. After calling arcTo() method, add the tangent point of arc and ray (x1, y1) (x2, y2) to the current path as the starting point of next drawing.

The sample code is as follows:

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(10, 10);

ctx.arcTo(210, 60, 10, 210, 30);

ctx.stroke();

//The above code gives a curve. In order to better assist readers in understanding arcto() method, the angle between two rays is drawn.

ctx.beginPath();

ctx.strokeStyle = "#000";

ctx.moveTo(10, 6);

ctx.lineTo(214, 60);

ctx.lineTo(10, 214);

ctx.stroke();

5. quadratic curve

quadraticCurveTo() is a quadratic curve acquisition method, and its detailed working diagram is as follows:

The sample code is as follows:

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(100,100);

ctx.quadraticCurveTo(125,225,225,166);

ctx.stroke();

Some people even gave an example of using quadraticCurveTo() to make a conversation bubble graph on the Internet. The code is as follows:

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(75,25);

ctx.quadraticCurveTo(25,25,25,62.5);

ctx.quadraticCurveTo(25,100,50,100);

ctx.quadraticCurveTo(50,120,30,125);

ctx.quadraticCurveTo(60,120,65,100);

ctx.quadraticCurveTo(125,100,125,62.5);

ctx.quadraticCurveTo(125,25,75,25);

ctx.stroke();

6. Bezier curve

Bezier curves are important parametric curves in numerical analysis and computer graphics. Higher dimensional Bezier curves are called Bezier surfaces.

The bezierCurveTo() method has one more control point than the previous quadraticCurveTo() method, so it is richer.

The working diagram of bezierCurveTo() method is shown in the following figure:

The code for drawing a Bezier curve is as follows:

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(50,150);

ctx.bezierCurveTo(150,50,250,150,350,50);

ctx.stroke();

implementation

There is also a heart-shaped case of bezierCurveTo() on the Internet, which is also provided for your reference here:

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);

ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.stroke();

Using quadratic and cubic Bezier curves is quite challenging. Because there is no immediate visual feedback like in vector drawing software Adobe Illustrator, it is more troublesome to draw complex graphics. But theoretically, any complex graph can be drawn using Bezier curves.

Note that quadratic to cubic conversion is possible, but not necessarily vice versa, and conversion to quadratic Bezier curves is possible only when the cubic term in the cubic equation is zero. A cubic Bezier curve can usually be approximated by a subdivision algorithm using multiple quadratic curves.

"How to draw various lines with Canvas in HTML5" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.