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

Today, I would like to share with you how to use HTML5 Canvas to draw the curve of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Curve method included in Canvas2D

In fact, many drawing tools in the simple curve drawing are using the Baez curve, if you have used the windows drawing tool in the curve must be no stranger. You can drag a straight line first, and then click on a location to twist the straight line. The initial drag action is to determine the two vertices of the curve, and the click action is to add an intermediate point. The drawing tool that comes with windows uses a cubic Bates curve, and you can add two intermediate points. Different from the general polynomial interpolation, the intermediate point of the Bates curve is only used as the control point, not the vertex that the curve must pass through. And it can also make a closed curve. There are two ways to draw curves in Canvas2D

QuadraticCurveTo: quadratic Bates curve

BezierCurveTo: cubic Bates curve

Lines are drawn from the current position, which can be specified using the moveTo method. After you have the start position of the curve, you also need the middle point and the end position. Just pass these location coordinates to the drawing function. For example, the quadratic Bates curve needs an intermediate point and an end position, so pass two coordinates to the quadraticCurveTo function. The coordinates are made up of x and y, which means that the function has four parameters. BezierCurveTo is the same, except that it has two halfway points. Let's use it next.

CSS Code copies content to the clipboard

Var g=canvas.getContext ("2d")

/ / ordinary straight line

G.beginPath ()

G.strokeStyle = "# CCC"

G.moveTo (0Pol 0)

G.lineTo (2007.0)

G.lineTo (0200)

G.lineTo (200200)

G.stroke ()

/ / Bates curve

G.beginPath ()

G.strokeStyle = "# F00"

G.moveTo (0Pol 0)

G.bezierCurveTo (0,0,200,200,200200)

G.stroke ()

This is given four points according to the Z-shaped trajectory, drawing an ordinary straight line and a Bates curve. This is just an ordinary curve, and the beauty of the Bates curve is that it can draw a closed curve, such as a piece of code like this.

CSS Code copies content to the clipboard

G.beginPath ()

G.strokeStyle = "# 00F"

G.moveTo (100pi 0)

G.bezierCurveTo (- 100.200,300.200,100.0)

G.stroke ()

A closed curve can be drawn by setting the start position and the end position of the cubic Bates curve to the same point. Because the interpolation direction of the Bates curve does not follow the coordinate axis, a closed curve can be drawn. If we want polynomial interpolation to draw a closed curve, we have to convert the parameters and use the polar coordinate system to do it.

These are all the contents of the article "how to draw a curve with HTML5's Canvas". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.