Use the path in HTML5 Canvas to describe the second-and third-order besell curves. html5canvas

Source: Internet
Author: User

Use the path in HTML5 Canvas to describe the second-and third-order besell curves. html5canvas
This article describes how to use paths in HTML5 Canvas to draw second-and third-order besell curves. This article provides implementation code, examples, and explanations. For more information, see

In HTML5 Canvas, you can use the following method to describe the third-and second-order besell curves:


The Code is as follows:
Context. bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)
Context. quadraticCurveTo (cpx, cpy, x, y)

The beiser curve is a curve defined by a "starting point", an "ending point", and one or more "Control Points" on a two-dimensional plane. The common third-order besell curve uses two control points, while the second-order Curve uses only one control point.

To draw a second-order besell curve, you only need to set the coordinates of the end point and the coordinates of the control point:


The Code is as follows:
Context. moveTo (0, 0 );
Context. quadraticCurveTo (, 25 );

The code execution result is as follows:

The curve in the preceding example starts from the coordinate (0, 0) and ends at (0, 50), and the coordinate of the control point used to control the curve plotting is ).

Compared with the second-order curve, because two control points can be set, the plotting of the Third-Order besell curve is more flexible. The following code depicts a "S" curve:

The Code is as follows:
Context. moveTo (150,0 );
Context. bezierCurveTo (0,125,300,175,150,300 );

For more information about the beiser curve, see the entries on Wikipedia (http://en.wikipedia.org/wiki/bw.zier_curve). The animation provides a good explanation of the beiser curve generation mechanism.

NOTE 2: currently, HTML5 Canvas supports only three-level besell curves. curves above four levels are not supported yet.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.