绘制曲线和弧线的方法

• ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
  用于绘制圆或部分圆。
  参数：
  x-圆弧中心（圆心）的 x 轴坐标。
  y-圆弧中心（圆心）的 y 轴坐标。
  radius-圆弧的半径。
  startAngle-圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
  endAngle-圆弧的终点，单位以弧度表示。
  anticlockwise-可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

• ctx.arcTo(x1, y1, x2, y2, radius)
  用于在画布上绘制介于两个切线之间的弧线。
  参数：
  x1-第一个控制点的 x 轴坐标。
  y1-第一个控制点的 y 轴坐标。
  x2-第二个控制点的 x 轴坐标。
  y2-第二个控制点的 y 轴坐标。
  radius-圆弧的半径。

• ctx.quadraticCurveTo(cpx, cpy, x, y)
  绘制二次贝塞尔曲线路径的方法。
  参数：
  cpx-控制点的 x 轴坐标。
  cpy-控制点的 y 轴坐标。
  x-终点的 x 轴坐标。
  y-终点的 y 轴坐标。

• ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  绘制三次贝赛尔曲线路径的方法。
  参数：
  cp1x-第一个控制点的 x 轴坐标。
  cp1y-第一个控制点的 y 轴坐标。
  cp2x-第二个控制点的 x 轴坐标。
  cp2y-第二个控制点的 y 轴坐标。
  x-结束点的 x 轴坐标。
  y-结束点的 y 轴坐标。

事例一

绘制圆弧路径ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

arc() 方法用于创建用于创建圆或部分圆。

绘制一整个圆。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')//绘制圆弧的方法// ctx.arc(圆心X,圆心Y，半径，开始角度，结束角度，顺时针还是逆时针)默认是顺时针，逆时针更改为true//绘制圆心在（200,200，半径为100的圆。ctx.beginPath()ctx.arc(200, 200, 100, 0, Math.PI*2 )ctx.lineWidth = 5// 显示路径ctx.stroke()ctx.closePath()</script>

绘制笑脸图像。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')//绘制圆弧的方法// ctx.arc(圆心X,圆心Y，半径，开始角度，结束角度，顺时针还是逆时针)默认是顺时针，逆时针更改为true// 绘制嘴巴ctx.beginPath()ctx.arc(200, 200, 70, 0, Math.PI )// 设置颜色ctx.strokeStyle='red'// 显示路径ctx.stroke()ctx.closePath()// 绘制脸蛋ctx.beginPath()ctx.arc(200, 200, 100, 0, Math.PI*2 )ctx.strokeStyle='#000'ctx.stroke()ctx.closePath()// 绘制左眼睛ctx.beginPath()ctx.arc(160, 170, 10, 0, Math.PI*2 )ctx.strokeStyle='#000'ctx.stroke()ctx.closePath()// 绘制右眼睛ctx.beginPath()ctx.arc(240, 170, 10, 0, Math.PI*2 )ctx.strokeStyle='#000'ctx.stroke()ctx.closePath()</script>

事例二

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

arcTo() 方法用于在画布上绘制介于两个切线之间的弧。
这是一段绘制圆弧的简单的代码片段。基础点是蓝色的，两个控制点是红色的。

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')ctx.beginPath()// 移动到起点位置ctx.moveTo(100,100)// ctx.arcTo(第一个控制点X,第一个控制点点Y,第二个控制点X,第二个控制点Y, 圆弧半径);ctx.arcTo(200,100,200,200, 50);//	ctx.fill() ctx.stroke()ctx.closePath()</script>

事例三

二次贝塞尔曲线ctx.quadraticCurveTo(cpx, cpy, x, y)

二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。所以如果路径不存在，那么需要先使用 beginPath() 和 moveTo() 方法来定义开始点。

绘制一个聊天气泡

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')//  使用quadraticCurveTo绘制二次贝塞尔曲线，完成消息框效果。//  ctx.quadraticCurveTo(控制点x, 控制点Y, 结束点x, 结束点y);//  放下画笔ctx.beginPath()// 移动画笔位置ctx.moveTo(200,200)ctx.quadraticCurveTo(150,200,150,150);ctx.quadraticCurveTo(150,100,200,100);//  画一条线段ctx.lineTo(300,100)ctx.quadraticCurveTo(350,100,350,150);ctx.quadraticCurveTo(350,200,250,200);ctx.quadraticCurveTo(250,240,180,250);ctx.quadraticCurveTo(200,240,200,200);//  绘制边框效果ctx.stroke()// ctx.fill()ctx.closePath()</script>

轮廓效果

填充效果

事例四

三次贝塞尔曲线 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么也是需要先使用 beginPath() 和 moveTo() 方法来定义开始点。

绘制一个填充的爱心

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')//  使用bezierCurveTo绘制三次贝塞尔曲线，绘制爱心效果。//  ctx.bezierCurveTo(控制点x, 控制点Y, 第二控制点x，第二控制点Y，结束点x, 结束点y);//  放下画笔ctx.beginPath()// 移动画笔位置ctx.moveTo(300,180)ctx.bezierCurveTo(350,100,500,200,300,350)ctx.bezierCurveTo(100,200,250,100,300,180)//  添加描边的颜色// ctx.strokeStyle  = 'red'//  绘制边框效果ctx.stroke()//  添加填充的颜色ctx.fillStyle  = 'red'//  绘制填充效果ctx.fill()ctx.closePath()</script>