Bezier. Css_svg_canvas Drawing _ Bézier curve

ZC: (1), SVG can draw Bézier curve, (2), canvas can draw Bézier curve, (3), now (20180202) find out, CSS seemingly can not draw Bézier curve, CSS using Bezier curve is mainly used to control the speed of animation, later do not know whether CSS can be directly drawn Bézier curve.

1, CSS Bezier view: (Look at the elements of the page, the place where the curve is actually used to draw the canvas)

http://cubic-bezier.com/

http://yisibl.github.io/cubic-bezier/

ZC: Note that the coordinate system here is the same as the mathematical coordinate system (Y-axis is up), and the coordinate system of SVG is not the same.

2. Reference website:

Bezier vs. CSS3 animations, SVG, and canvas? Zhang Xin Xu-Xin space-xin life. html

(http://www.zhangxinxu.com/wordpress/2013/08/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF-cubic-bezier-css3% e5%8a%a8%e7%94%bb-svg-canvas/)

(http://www.zhangxinxu.com/wordpress/2013/08/Bézier curve-cubic-bezier-css3 animation-svg-canvas/)

2.1, the content of the website to save:

A. Very busy, short speech

Recently Google that who because his lover was the eldest brother robbed, went to millet! The triangular relationship between dog blood is much better than the rotten TVB God play.

But this is only a side dish, the Bezier curve is a very character, because of the foreign descent, and therefore, and CSS3 animation, SVG and canvas have a basic feeling, the base of the bloom like the summer chrysanthemum.

However, there is a good base, you can Yiguoduan together, there is no such a song ~

Each other, the two dolls, a Vine on the seven flower;
Even the root of a pull, all dead! Oh, cheer up ...

So, how can you miss such a Yiguoduan?

Second, understanding the protagonist--Bessel

Test you, which of the following Bessel is the Bézier curve? Only ONE Chance! (Click to select)

Bessel, Pierre Bézier, French mathematician ~

Three, Bezier curve action

Bezier curve function: curve, draw curve, draw beautiful woman curve, the law can draw beauty curve by the way. Because of this feature, so by SVG, Canvas, CSS3 and other favor, starting from the base.

Iv. how to draw curves with Bezier curves

If I give you a point, what can you do?
A: I can pry the earth ...... ..... ...........................-........ Model.

If I give you two points, what can you do?
A: I can draw the earth ..... ..... ................................... Curve

is under-qualified.

A standard 3-time Bezier curve requires 4 a point: A starting point, a terminating point (also called an anchor point), and two separate intermediate points.

Regardless of SVG, canvas or CSS3 animation and Bezier base, all involved in these 4 points. Let's have a look.

V. The basic history of SVG and Bezier curves

SVG has been introduced several times before, scalable vector graphics (Scalable vector graphic), two-dimensional, XML tags, similar to the following:

<svg width= "160px" height= "160px" >  <path d= "M10 ..."/></svg>

The essence is HTML-like things.

For design lions, you can also play with SVG, draw online, or draw and export in Illustrator.

SVG code is not specifically expanded (it can be serialized several), mention one path of the tags, you can draw any path, nature also includes and Bezier to do the base.

Three Bezier curve directives: C x1 y1, x2 y2, x y Two control Points (x1,y1) and ( x2,y2) , (x,y) representing the end point of the curve. Letters C denote specific actions and behaviors, which need to be capitalized, representing the standard three-cubic Bezier curve.

Take a look at some of the following code (fragments) that describe the Bezier curve, and you can get a good sense of it (where the letter M represents a specific action moveTo , which means moving the drawing's starting point here).

<svg width= "190px" height= "160px" >  <path d= "M10", "stroke=", 3 "fill=" None "/>  < ;p ath d= "M70", "stroke=", "3" fill= "None"/> <path  d= "M130 C-Ten," "Str Oke= "3" fill= "None"/>  <path d= "M10" stroke= 60, 3 "fill=" "None"/> <path d= "M70  C, the "stroke=" 3 "fill=" "None"/>  <path d= "M130", "stroke=", the 3 fill= "no Ne "/> <path d=" M10 (c), 3 "stroke=" "fill="/> <path d= "  none" M70  70 140, 1 Ten, the "stroke=" 3 "fill=" None "/> <path d=" M130 "C, the more than 3," stroke= "and" The "" "" "" The ""  none "/ ></svg>

The curve effect is similar to the following picture:

You can see M the back of the starting point, plus the C following 3 points, forming a Bezier curve 4 point.

The basic history of canvas and Bezier curve

Canvas has also been introduced before, HTML canvas elements, scripted client drawing.

There is a method of canvas bezierCurveTo() , dedicated to and Beserki love lingering.

Code Walk:

var C=document.getelementbyid ("MyCanvas"), Var ctx=c.getcontext ("2d"), Ctx.beginpath (); Ctx.moveto (20,20); Ctx.beziercurveto (20,100,200,100,200,20); Ctx.stroke ();

Start point: MoveTo (20,20) control point 1:beziercurveto (20,100,200,100,200,20) control point 2:beziercurveto (20,100,200,100,200,20) end points:  Beziercurveto (20,100,200,100,200,20)

Compared to the SVG code, we have found that wood is essentially a virtue-there is a m , there are 3 points. That's why you are so passionate!

Seven, CSS3 animation and the basic history of Bezier curve

The Bezier curve determines the rhythm of the Cs3s animation-is the first fast and slow, or slow after the fast ~ ~

In order to better make a base, CSS3 also reserved a VIP attribute, called cubic-bezier , literal translation "cubic-Bezier", actually refers to the standard three cubic Bezier curve.

The specific usage is similar to:

Transition:cubic-bezier (. 25,.1,.25,1)

The .25,.1 anchor point where this coordinate is connected to the starting point; .25,1 this coordinates the point at the top of the antenna at the end of the head.
Zxx: Everyone, polish your eyes, two coordinates are not the same OH ~ ~

There is a dedicated page for you to feel how the CSS3 animation is based on the Bezier curve, click here to go:
http://cubic-bezier.com/#.25,.1,.25,1

The above link is a very good tool, you want to what effect, you can adjust their own, and then copy cubic-bezier the relevant code can be.

Some people will doubt, CSS3 animation that cubic-bezier value seems to have only two points eh ~ ~

That's because the starting and ending points of the CSS3 animated Bezier curve are fixed, (0,0) respectively (1,1) .

Eight, engage Kista collection

CSS3 seemed to be slightly out of step, so we made a slight adjustment to a perfect resonance with the frequency of the epoch-making invincible big base:

• CSS3 Bézier starting point is 0,0 ; 1, 1

  Cubic-bezier (X1,y1, X2,y2)

• SVG wants to work with the above, as long as:

  <path d= "M0 0 C x1 y1, x2, y2, 1 1"/>

• Canvas wants to work with you as a base, as long as:

  Ctx.moveto (0,0); Ctx.beziercurveto (x1,y1,x2,y2,1,1);

The exact same is the endpoint coordinates of the antenna inserted on the head, which x1,y1 is the endpoint coordinates of the (0,0) antenna inserted on the x2,y2 (1,1) head.

So, the three and Bezier curve perfect base! Sprinkle flowers, set off firecrackers ~ ~

Ix. Conclusion and reference content

With our actual contact more should be CSS3 Bezier curve, and once again found that Bezier curve is actually such a thing, a little more perceptual intuitive understanding, dealing with the problem is more handy, I hope this article content can be helpful to your study.

Thanks for reading, please correct the inaccuracy of the article.

Reference article:

• RAID HTML5 svg 2D Getting started with graphic drawing
• http://cubic-bezier.com/
• Understanding CSS Cubic-bezier
• Easing visualization
• Easing function

(End of this article)

3.

4.

5.

Bezier. Css_svg_canvas Drawing _ Bézier curve