Canvas基本知识点二：曲线图形

本次主要介绍canvas中绘制圆形、弧线、二次贝塞尔曲线和三次贝塞尔曲线。一些曲线图形封装的方法，可以参考github.com/yxjz/Canvas。

一、圆形介绍

（一）基本语法

语法：

cxt.beginPath();
cxt.arc(x,y,半径,开始角度，结束角度，anticlockwise);
cxt.closePath();复制代码

说明：

1、x和y

  x：表示圆心横坐标

  y：表示的圆心的纵坐标

2、开始角度，结束角度

   都是以弧度为单位，例如180度，就应该写成Math.PI,而360度写成Math.PI*2.以此类推。

     在实际开发中，推荐这种写法“度数*Math.PI/180”,因为这样可以一眼看出是多少度。如120*Math.PI/180 表示120度。

3、anticlockwise

是个布尔值，为true的时候表示按逆时针绘制，为false时，表示顺时针。默认值是false。

                                 

（二）‘描边’圆

在canvas中，用stroke()方法来绘制一个描边的圆

语法

//状态描述
cxt.beginPath();
cxt.arc(x,y,半径,开始角度，结束角度，anticlockwise);
cxt.closePath();
//描边
cxt.strokeStyle = '颜色值'
cxt.stroke();复制代码

（三）‘填充’圆

在canvas中，用fill()方法来绘制一个填充的圆

语法

//状态描述
cxt.beginPath();
cxt.arc(x,y,半径,开始角度，结束角度，anticlockwise);
cxt.closePath();
//描边
cxt.fillStyle = '颜色值'
cxt.fill();复制代码

说明：后填充的会覆盖先填充的。

二、弧线

弧线的常见的方法有arc(),和arcTo()两种方法。

（一）、arc()画弧线

语法

//状态描述
cxt.beginPath();
cxt.arc(x,y,半径,开始角度，结束角度，anticlockwise);
//描边
cxt.strokeStyle = '颜色值'
cxt.stroke();复制代码

arc()画弧线与画描边园最大的不同在于弧线不用closePath()关闭路径。closePath()方法的作用在于关闭路径、链接起点与终点。

（一）、arcTo()画弧线

语法

cxt.arcTo(cx,cy,x2,y2,radius)复制代码

说明

       cx,xy表示控制点的坐标，x2,y2表示结束点坐标，radius表示圆弧的半径。如果我们要画一条弧线，就要提供开始点、控制点和结束点的三点坐标，一般是由moveTo()或lineTo()提供开始点，arcTo()提供结束点。

        actTo()方法就是利用“开始点”，“控制点”，“结束点”这三个点所形成的夹角，然后绘制一段与夹角的两边相切并半径为radius的圆弧。弧线的起点是开始点所在边与圆的切点，终点是结束点所在的边与圆的切点。如图

                                

arcTo()方法绘制的弧线是两个切点之间长度最短的弧线，此外iai，如果开始点不是弧线的起点，此方法还将添加一条当前端点到弧线起点的直线线段，也就是说，开始点坐标并不一定是弧线起点坐标。如：

cxt.moveTo(20,20)
cxt.lineTo(70,20)
cxt.arcTo(120,20,120,70,50)
cxt.lineTo(120,120)
cxt.srtoke();复制代码

去掉lineTo(),arcTo方法还将添加一条当前端点到弧线起点的直线线段。

三、二次贝塞尔曲线

语法

cxt.quadraticCurveTo(cx,cy,x2,y2)复制代码

说明：

cx,cy表示控制点的坐标，x2,y2表示结束点坐标

绘制一条贝塞尔曲线，同样也需要三个坐标点：开始点、控制点、结束点。其中开始点一般由moveTo()或lineTo()提供。

cxt.moveTo(30,120)
cxt.quadraticCurveTo(100,20,160,120)
cxt.stroke()复制代码

                              

四、三次贝塞尔曲线

语法

cxt.bezierCurveTo(cx1,cy1,cx2,cy2,x,y)复制代码

说明

cx1,cx2表示控制点1的坐标，cx2,cy2表示控制点2的坐标，x,y表示结束点坐标。

绘制一条三次贝塞尔曲线，需要开始点，控制点1，控制点2，结束点。其中开始点一般由moveTo()或lineTo()提供。

                                 

转载于:https://juejin.im/post/5b84af0351882542e56e5a03