绘制曲线

圆弧

arc

语法

arc(x, y, r, startAngle, endAngle, anticlockwise)

  • (x, y) 为圆心,以r为半径,从 startAngle 弧度开始到 endAngle 弧度结束,注意: 单位为弧度。
  • anticlosewise 是布尔值,true 表示逆时针,false 表示顺时针。(默认是顺时针)
  • 0弧度为在一个笛卡尔坐标系中的x轴正方向
  • 通常使用 Math.PI 进行弧度运算,一个 Math.PI 就是 180deg
  • radians=(Math.PI/180)*degrees // 角度转换成弧度1

如:

ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();

效果如下:

可以看到从x轴正方向顺时针绘制出了半径为40的 1/4 圆弧。

arcTo

语法

arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。

ctx.beginPath();
ctx.moveTo(50, 50);
//参数1、2:控制点1坐标   参数3、4:控制点2坐标  参数5:圆弧半径
ctx.arcTo(200, 50, 200, 200, 50);
ctx.lineTo(200, 200)
ctx.stroke();

效果如下:

原理图:

可以理解为: 绘制的弧形是由两条切线所决定。

第 1 条切线:起始点和控制点1决定的直线。

第 2 条切线:控制点1 和控制点2决定的直线。

圆弧半径可以回想一下css中border-radius的实现。

贝塞尔曲线

贝塞尔曲线(Bézier curve),又称贝兹曲线贝济埃曲线,是应用于二维图形应用程序的数学曲线。

一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

原理动画

一次贝塞尔曲线:

二次贝塞尔曲线:

三次贝塞尔曲线:

绘制二次贝塞尔曲线

语法

quadraticCurveTo(cp1x, cp1y, x, y);

参数说明:

  • 参数1和2:控制点坐标
  • 参数3和4:结束点坐标
ctx.beginPath();
let bX = 10, bY = 160; // 起始点
ctx.moveTo(bX, bY);
let cX = 40, cY = 100;  // 控制点
let toX = 180, toY = 180; // 结束点
// 绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cX, cY, toX, toY);
ctx.stroke();
ctx.beginPath();
ctx.rect(bX, bY, 10, 10);
ctx.rect(cX, cY, 10, 10);
ctx.rect(toX, toY, 10, 10);
ctx.fill();

为了方便理解,将起始点、控制点、结束点都用实心矩形标出。

绘制三次贝塞尔曲线

语法

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

参数说明:

  • 参数1和2:控制点1的坐标
  • 参数3和4:控制点2的坐标
  • 参数5和6:结束点的坐标
ctx.beginPath();
let bX = 10, bY = 160; // 起始点
ctx.moveTo(bX, bY);
let cX1 = 20, cY1 = 50;  // 控制点1
let cX2 = 60, cY2 = 150;  // 控制点2
let toX = 180, toY = 180; // 结束点
// 绘制二次贝塞尔曲线
ctx.bezierCurveTo(cX1, cY1, cX2, cY2, toX, toY);
ctx.stroke();
ctx.beginPath();
ctx.rect(bX, bY, 10, 10);
ctx.rect(cX1, cY1, 10, 10);
ctx.rect(cX2, cY2, 10, 10);
ctx.rect(toX, toY, 10, 10);
ctx.fill();

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress