学习Canvas基础-绘制弧线和曲线

绘制曲线和弧线的方法

• 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>