context.quadraticCurveTo(controlX, controlY, endingX, endingY)
绘制从当前笔位置开始到给定结束坐标的二次曲线。另一个给定的控制坐标确定曲线的形状(弯曲度)。
<!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=70; var controlX=75; var controlY=25; var endX=125; var endY=70; // A quadratic curve drawn using "moveTo" and "quadraticCurveTo" commands ctx.beginPath(); ctx.moveTo(startX,startY); ctx.quadraticCurveTo(controlX,controlY,endX,endY); ctx.stroke(); }); // 结束window.onload </script> </head> <body> <canvas id="canvas" width=200 height=150></canvas> </body> </html>