How to draw Bezier Curve by HTML5 Canvas

This article is about how HTML5 Canvas draws Bezier curves. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Bezier curve: it can be in the form of quadratic and cubic power and is generally used to draw complex and regular shapes.

Methods:

QuadraticCurveTo (cp1x, cp1y, x, y)

BezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)

The parameters x and y are the end point coordinates, cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the second.

Drawing chat Bubble with Bezier Curve

Description

Drawing chat Bubble with Bezier Curve

Code

Function draw () {

Var canvas = document.getElementById ("cv")

If (canvas.getContext) {

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

Ctx.moveTo (75, 25)

Ctx.quadraticCurveTo (25pr 25pr 25pr 62.5)

Ctx.quadraticCurveTo (25pr 100pl 50100)

Ctx.quadraticCurveTo (50, 120, 30, 125)

Ctx.quadraticCurveTo (60, 120, 65, 100)

Ctx.quadraticCurveTo (125pr 100pr 125pr 62.5)

Ctx.quadraticCurveTo (125, 25, 75, 25)

Ctx.stroke ()

}

}

Drawing chat Bubble with Bezier Curve