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

In this article Xiaobian for you to introduce in detail "how to draw a curve with canvas in HTML5", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to draw a curve with canvas in HTML5" can help you solve your doubts.

Is a new tag in HTML5, used to draw graphics, in fact, this tag is the same as other tags, its special feature is that the tag can get a CanvasRenderingContext2D object, we can use JavaScript script to control the object to draw.

It's just a container for drawing graphics, with height and width properties in addition to id, class, style, and so on. There are three main steps to draw on the > element:

1. Gets the DOM object corresponding to the element, which is a Canvas object

two。 Call the getContext () method of the Canvas object to get a CanvasRenderingContext2D object

3. Call the CanvasRenderingContext2D object to draw.

Draw a curve

There are four functions with the one who draws the curve, which are:

Context.arc; used to create arcs / curves (for creating circles or partial circles). The meaning of the received parameters:

| | Parameter | description |

| |:-- |:-|

| | x | the x coordinate of the center of the circle |

| | y | y coordinate of the center of the circle |

| | r | Radius of the circle |

| | sAngle | starting angle, measured in radians (the 03:00 position of the arc circle is 0 degrees) |

| | eAngle | end angle, in radians |

| counterclockwise | optional. It is stipulated that the drawing should be counterclockwise or clockwise. False = clockwise, true = counterclockwise |

Here are a few examples of several arc () functions:

JavaScript Code copies content to the clipboard

Var canvas = document.getElementById ("canvas")

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

Context.strokeStyle = "# F22D0D"

Context.lineWidth = "2"

/ / draw a circle

Context.beginPath ()

Context.arc (100, 100, 40, 0, 0, 7, 7, 7, 2, 9, 9, 9, 2, 9, 9, 2, 9, 9, 2, 9, 9, 4, 4, 4, 4, 4, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 6, 6, 6, 6, 6, 6, 6, 6,

Context.stroke ()

/ / draw a semicircle

Context.beginPath ()

Context.arc (200, 100, 40, 0 and 0, Math. Pi)

Context.stroke ()

/ / draw semicircle, counterclockwise

Context.beginPath ()

Context.arc (300, 100, 40, 0, and 0, Math.Pi, true)

Context.stroke ()

/ / draw a closed semicircle

Context.beginPath ()

Context.arc (400, 100, 40, 0, and 0, Math. Pi)

Context.closePath ()

Context.stroke ()

The effect is as follows:

Context.arcTo (x1century y1meng x2jinr); creates an arc / curve on the canvas between two tangents. The meaning of the received parameters:

It should be noted here that the starting point of the curve drawn by the arcTo function needs to be set by the moveTo () function. The following uses the arcTo function to draw a rounded rectangle:

JavaScript Code copies content to the clipboard

Function createRoundRect (context, x1, y1, width, height, radius)

{

/ / move to the upper left corner

Context.moveTo (x1 + radius, y1)

/ / add a segment connected to the upper right corner

Context.lineTo (x1 + width-radius, y1)

/ / add a section of arc

Context.arcTo (x1 + width, y1, x1 + width, y1 + radius, radius)

/ / add a segment connected to the lower right corner

Context.lineTo (x1 + width, y1 + height-radius)

/ / add a section of arc

Context.arcTo (x1 + width, y1 + height, x1 + width-radius, y1 + height, radius)

/ / add a segment connected to the lower left corner

Context.lineTo (x1 + radius, y1 + height)

/ / add a section of arc

Context.arcTo (x1, y1 + height, x1, y1 + height-radius, radius)

/ / add a segment connected to the upper left corner

Context.lineTo (x1, y1 + radius)

/ / add a section of arc

Context.arcTo (x1, y1, x1 + radius, y1, radius)

Context.closePath ()

}

/ / get the DOM object corresponding to the canvas element

Var canvas = document.getElementById ('mc')

/ / get the CanvasRenderingContext2D object that is drawn on canvas

Var context = canvas.getContext ('2d')

Context.lineWidth = 3

Context.strokeStyle = "# F9230B"

CreateRoundRect (context, 30,30,400,200,50)

Context.stroke ()

Context.quadraticCurveTo (cpx,cpy,x,y); draw the quadratic Besse curve. The parameters are as follows:

The start point of the curve is the last point in the current path. If the path does not exist, use the beginPath () and moveTo () methods to define the starting point.

Context.bezierCurveTo (cp1x,cp1y,cp2x,cp2y,x,y); draw cubic Bezier curve

After reading this, the article "how to draw a curve with canvas in HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow 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.