HTML5 canvas基本绘图之绘制曲线

2020-04-25 08:11:17易采站长站整理

    context.lineWidth = 3;   
    context.strokeStyle = "#F9230B";   
    createRoundRect(context , 30 , 30 , 400 , 200 , 50);   
    context.stroke();   
  

效果如下:

•context.quadraticCurveTo(cpx,cpy,x,y);绘制二次贝塞曲线,参数含义如下:

曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

 •context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线,参数如下: