context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)
绘制从当前笔位置开始到给定结束坐标的三次贝塞尔曲线。给定的另外2个控制坐标确定曲线的形状(弯曲度)。
<!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ // 获取对canvas元素及其上下文的引用 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); // 论点 var startX=25; var startY=50; var controlX1=75; var controlY1=10; var controlX2=75; var controlY2=90; var endX=125; var endY=50; // A cubic bezier curve drawn using "moveTo" and "bezierCurveTo" commands ctx.beginPath(); ctx.moveTo(startX,startY); ctx.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY); ctx.stroke(); }); // 结束window.onload </script> </head> <body> <canvas id="canvas" width=200 height=150></canvas> </body> </html>