canvas学习之圆滑曲线的绘制

复习

上一节学习，我们学习了圆和圆弧的画法。一共有两个方法，第一个是arc(x,y,radius,startAngle,endAngle, anticlockwise)，其中x和y是圆，radius是圆的半径，startAngle和endAngle是圆弧的开始弧度和结束弧度。弧度的计算公式是1弧度 = Math.PI / 180 角度，anticlockwise表示是否按照逆时针的方向绘画， true表示是，false或者不写表示按照顺时针方向绘画。另外一个方法是通过两点绘制一条圆弧，arcTo(x1,y1,x2,y2,radius)。其中x1,y1表示圆弧的起点，x2,y2表示圆弧的终点，radius表示半径。

学习用二次贝塞尔曲线绘制光滑曲线

对于贝塞尔曲线不理解的，可以看看这篇文章深入理解贝塞尔曲线，我本来想把理解写下来，但发现不管怎么写都比不上这一篇文章。所以推荐大家先去看这一篇文章将贝塞尔曲线理解了，然后再来继续学习，不然就是死记硬背了。

canvas为我们提供了二次贝塞尔曲线的画法，我们直接提供点就可以了，剩下的它都会给我们完成。

  • 接口名quadraticCurveto(x1,y1,x2,y2).x1，y1表示一个控制点，x2，y2表示结束点。在实际应用中会和moveTo(x,y)或者lineTo(x,y)的点组合起来，成为三个点。用法例子如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <canvas id="mycanvas5" width="500" height="500"></canvas>
    <script>
    var canvas = document.getElementById('mycanvas5')
    if (canvas.getContext) {
      let ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(100, 100)
      ctx.quadraticCurveTo(150, 150, 100, 200)
      ctx.closePath()
      ctx.stroke()
    }
    </script>

学习用三次贝塞尔曲线绘制圆滑的曲线

三次贝塞尔曲线的绘制，canvas提供了bezierCurveTo(x1,y1,x2,y2,x3,y3)函数，来帮助我们绘制。x1,y1和x2，y2是两个控制点，x3和y3是终点，moveTo(x,y)或者lineTo(x,y)提供的点是曲线的开始点。

例子

1
2
3
4
5
6
7
8
9
10
11
12
<canvas id="mycanvas" width="500" height="500"></canvas>
<script>
let canvas = document.getElementById('mycanvas')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(100,100)
  ctx.bezierCurveTo(150, 150, 300,200, 100, 200)
  ctx.stroke()
}
</script>