两个控制点
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>bezierCurveTo</title>
</head> <body>
<canvas id='myCanvas' width='400' height='200'>
your browser does not support canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');
var cxt = c.getContext('2d');
cxt.beginPath();
var sx = 20,
sy = 100,
cx1 = 45,
cy1 = 70,
cx2 = 95,
cy2 = 130,
ex = 120,
ey = 100;
cxt.moveTo(sx, sy);
cxt.bezierCurveTo(cx1,cy1,cx2,cy2,ex,ey);
cxt.moveTo(sx, sy);
cxt.lineTo(cx1,cy1);
cxt.lineTo(cx2,cy2);
cxt.lineTo(ex,ey);
cxt.moveTo(0, 100);
cxt.lineTo(140, 100);
cxt.stroke();
</script>
</body> </html>