两个控制点
<!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>
原文：http://www.cnblogs.com/stono/p/4666952.html