canvas教程(三) 绘制曲线

通过 canvas 教程(二) 绘制直线 咱们知道了 canvas 的直线是怎么绘制的

而本次是给你们带来曲线相关的绘制

绘制圆形

在 canvas 中咱们可使用 arc 方法画一个圆

context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();

咱们是第一次用到 beginPath 和 closePath 这两个方法，首先这两个方法故名思意就是开始路径和结束路径，通常都是配合使用的。

对于 arc 的方法的参数，x 和 y 表明的是圆心的坐标，r 是指圆的半径，startRadian 和 endRadian 是指开始的角度和结束的角度

注意：这里是以弧度为单位的！

1π 等于 180 度，因此咱们这里写的时候通常是写成 度数*Math.PI/180，方便咱们一眼看出度数是多少

而 antclockwise 是指是不是逆时针绘制，默认是 false

有朋友会说了，我试了一下，写了这三句没有效果啊，怎么回事？没有效果是确定的，由于这三句仅仅只是描述了一个路径！并无绘制！因此咱们能够用上绘制直线中使用的“描边”stroke 或者“填充”fill

描边三角形：

context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();
context.strokeStyle = '颜色值';
context.stroke();
//描边 填充fill 同理  就不写了

绘制弧线

弧线是圆的一部分，那么如何绘制一个弧度呢，有朋友就发现了咱们刚才的 arc 也有一个弧度， 只是两个弧度之间的点有链接的一条直线，那么我去掉直线是否是就是弧线了呢？宾果！就是这样，只要你去掉 closePath 就会发现你画了一条弧线了 2333

好了那么 canvas 其实还有一个画弧线的方法 arcTo(x1,y1,x2,y2,radius);

咱们要经过 arcTo 画一条弧线，须要提供三个点的坐标，开始点通常是经过 moveTo 和 lineTo 提供 x1 和 y1 是控制点，x2 和 y2 是结束点，radius 则是圆弧的半径

arcTo()方法将利用当前端点、端点 1(x1,y1)和端点 2(x2,y2)这三个点所造成的夹角

而后绘制一段与夹角的两边相切而且半径为 radius 的圆上的弧线

弧线的起点就是当前端点所在边与圆的切点

弧线的终点就是端点 2(x2,y2)所在边与圆的切点，而且绘制的弧线是两个切点之间长度最短的那个圆弧。

若是当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。

我画一个图：

<img src="http://images.cnblogs.com/cnblogs_com/cnyball/1508697/o_1563765710(1).jpg"/>

咳咳，别介意画工，大概就是这样的，开始点是咱们的当前的点就是使用 arcTo 以前的点 下面我写两段代码演示一下起点一致和起点不一致的状况

context.moveTo(50, 50);
    context.lineTo(150, 50);
    ctx.arcTo(200,50, 200,100, 50);
    ctx.stroke();

context.moveTo(50, 50);
    ctx.arcTo(200,50, 200,100, 50);
    ctx.stroke();

是否是发现结果是同样的！

其中区别就细细品味吧，数学知识能够补一补

绘制贝塞尔曲线

百度百科：贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。通常的矢量图形软件经过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，咱们在绘图工具上看到的钢笔工具就是来作这种矢量曲线的。贝塞尔曲线是计算机图形学中至关重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

更多的就你们自行搜索吧，因为一次贝塞尔曲线就是直线，这里就不讲了，咱们直接讲 canvas 如何绘制二次贝塞尔曲线

二次贝塞尔曲线

cnavas 提供了一个方法 quadraticCurveTo(x1,y1,x2,y2)， 其中参数 x1 和 y1 是控制点，x2 和 y2 是结束点

起始点是调用方法以前的点

动图我不会画，可是我以前网上找到一个:

<img src="https://images0.cnblogs.com/blog/553761/201501/051752090937545.gif"/>

context.strokeStyle = 'red';
context.beginPath();
context.moveTo(0, 150);
context.quadraticCurveTo(75, 50, 200, 100);
context.stroke();
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(75, 50);
context.lineTo(0, 150);
context.moveTo(75, 50);
context.lineTo(200, 100);
context.stroke();

代码效果:

<img src="http://images.cnblogs.com/cnblogs_com/cnyball/1508697/o_1563768823.jpg"/>

三次贝塞尔曲线

三次贝塞尔曲线的方法则是 bezierCurveTo(x1,y1,x2,y2,x3,y3)

其中参数 x一、y1，x二、y2 是控制点，x3 和 y3 是结束点 就是提供多一个控制点！

画图原理是这样:

<img src="http://images.cnblogs.com/cnblogs_com/cnyball/1508697/o_051805136256233.gif"/>

这个例子就不写了，你们照着二次贝塞尔曲线的例子，练习一下！

结束

本次讲了：绘制圆形、绘制弧线、二次贝赛尔曲线、三次贝赛尔曲线，你们学会了多少呢？

好了，本次的教程就到这里结束了，下次将为你们带来线条和文本的操做