Every minute to get Bezier curves, this tool worth having

Bezier curve listen to know the name may draw a graceful curve, but up is the control point, it is how to control it, and thought the graphics are always associated with this control point is not on hold in a hurry, every minute to get.

Beisier quadratic Bezier curves and cubic Bezier curves, micro letter applet is used (other probably almost)
quadratic Bezier curve:

CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)

Cubic Bezier curves:

CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

Details can be viewed using the official document:

Tools preview:

If I want to draw a heart, how do?

First try quadratic Bezier curve tools
Here Insert Picture Description
do not seem too perfect, then try cubic Bezier curve tool
Here Insert Picture Description
perfect! ! !
Next, pass several parameters which will be able to function

Tools Experience

Here Insert Picture Description

Tool is very simple, just to write code convenience, Buchengjingyi.

Published 62 original articles · won praise 48 · views 10000 +

Guess you like

Origin blog.csdn.net/WeiHan_Seven/article/details/104648399