1, two times Bezier curve
The Quadraticcurveto (cpx,cpy,x,y)//cpx,cpy represents the coordinates of the control points, x,y the endpoint coordinates;
The mathematical formula is expressed as follows:
The path of the quadratic Bezier curve is tracked by the function B (t) of the given fixed-point P0, P1, and P2:
Code instance:
The
code is as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= "Utf-8" >
<title>canvas Line </title>
<meta name= "Keywords" content= "" >
<meta name= "author" content= "@my_programmer" >
<style type= "Text/css" >
body, h1{margin:0;
canvas{margin:20px;}
</style>
</head>
<body onload= "Draw ()" >
<h1> two times Bezier curve </h1>
<canvas id= "Canvas" width=200 height=200 "style= border:1px #ccc;" ></canvas>
<script>
function Draw () {
var canvas=document.getelementbyid (' canvas ');
var context=canvas.getcontext (' 2d ');
//Draw start point, control point, endpoint
Context.beginpath ();
Context.moveto (20,170);
Context.lineto (130,40);
Context.lineto (180,150);
Context.stroke (); </p> <p>//Draw 2 times Bezier curve
Context.beginpath ();
Context.moveto (20,170);
Context.quadraticcurveto (130,40,180,150);
Context.strokestyle = "Red";
Context.stroke ();
}
</script>
</body>
</html>
Code effect:
2, three times Bezier curve
Beziercurveto (Cp1x,cp1y,cp2x,cp2y,x,y)//cp1x,cp1y represents the coordinates of the first control point, cp2x,cp2y represents the coordinates of the second control point, and X,y represents the coordinates of the endpoint;
The mathematical formula is expressed as follows:
The four points of P0, P1, P2 and P3 have defined three quadratic Bezier curves in plane or in three-dimensional space. The curve begins at P0 toward the P1, and comes to P3 from the P2 direction. Generally do not pass P1 or P2; These two points are only there to provide direction information. The spacing between the P0 and the P1 determines how long the curve is in the P2 direction before it turns into P3.
Code instance:
The
code is as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= "Utf-8" >
<title>canvas Line </title>
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<style type= "Text/css" >
body, h1{margin:0;
canvas{margin:20px;}
</style>
</head>
<body onload= "Draw ()" >
<h1> Three-time Bezier curve </h1>
<canvas id= "Canvas" width=200 height=200 "style= border:1px #ccc;" ></canvas>
<script>
function Draw () {
var canvas=document.getelementbyid (' canvas ');
var context=canvas.getcontext (' 2d ');
//Draw start point, control point, endpoint
Context.beginpath ();
Context.moveto (25,175);
Context.lineto (60,80);
Context.lineto (150,30);
Context.lineto (170,150);
Context.stroke (); </p> <p>//Draw 3 times Bezier curve
Context.beginpath ();
Context.moveto (25,175);
Context.beziercurveto (60,80,150,30,170,150);
Context.strokestyle = "Red";
Context.stroke ();
}
</script>
</body>
</html>
Code Effect diagram:
Is it a cool effect ... Html5+canvas is really a fun thing, addicted to it.
