曲线图形
有关Canvas曲线图形，我们将学习以下4个方面。
- 圆形
- 弧线：是圆的弧线
- 二次贝塞尔曲线
- 三次贝塞尔曲线
圆形
在Canvas中，我们可以使用arc()方法来画一个圆。
语法
cxt.beginPath();
cxt.arc(x,y，半径，开始角度，结束角度， anticlockwise);
cxt.closePath();
说明
我们必须先调用beginPath()方法来声明“开始一个新路径”，然后才可以开始画圆。
在使用arc()方法画圆完成之后，还要调用closePath()方法来关闭当前路径。
beginPath()和closePath()一般都是配合使用的。其中，beginPath()表示“开始路径”,closePath()表示“关闭路径”。
cxt.arc(x,y，半径，开始角度，结束角度， anticlockwise); x和y:x表示圆心横坐标，y表示圆心纵坐标。也就是说，(x , y)表示圆心坐标。 开始角度、结束角度：开始角度和结束角度都是以弧度为单位。例如180°就应该写成Math.PI，而360°就应该写成Math.PI*2，依此类推。
anticlockwise:anticlockwise是一个布尔值，当其值为true时，表示按逆时针方向绘制；当其值为false时，表示按顺时针方向绘制。anticlockwise默认值为false，也就是说默认情况下按顺时针方向绘制。
描边圆
//描边 cxt.strokeStyle = "颜色值"; cxt.stroke();
说明
strokeStyle属性用于定义边框颜色，stroke()方法用于执行描边动作。
cxt.beginPath();
cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true);
cxt.closePath();
描边
cxt.strokeStyle = "HotPink";
cxt.stroke();
填充圆
在Canvas中，我们可以使用fill()方法来绘制一个“填充的圆”。
语法
状态描述
cxt.beginPath();
cxt.arc(x,y，半径，开始角度，结束角度， anticlockwise);
cxt.closePath();
在Canvas中，我们可以使用fill()方法来绘制一个填充圆
cxt.fill();
//半圆
cxt.beginPath();
cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
cxt.closePath();
//描边
cxt.fillStyle = "HotPink";
cxt.fill();
在使用arc()方法画弧线时不使用closePath()方法来关闭路径，没有闭合。
弧线
在Canvas中，如果我们想要画弧线，常用以下两种方法。 arc()。 arcTo()。
arcTo()方法画弧线
在Canvas中，我们可以使用arcTo()方法来画一条弧线，如图3-11所示。
语法
cxt.arcTo(cx,cy,x2,y2,radius);
说明
(cx , cy)表示控制点的坐标，(x2 , y2)表示结束点的坐标，radius表示圆弧的半径。
arcTo()方法画弧线分析
想要画一条弧线，我们需要提供3个点坐标：开始点、控制点和结束点。其中，开始点一般由moveTo()或lineTo()提供， arcTo()则提供了控制点和结束点。
arcTo()方法就是利用开始点、控制点和结束点所形成的夹角，绘制一段与夹角的两边相切并且半径为radius的圆弧。其中，弧线的起点是“开始点所在边与圆的切点”，而弧线的终点是“结束点所在边与圆的切点”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function $$(id){
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
cxt.moveTo(40,20);
cxt.lineTo(160,20);
cxt.arcTo(180,20,180,40,20);
cxt.moveTo(180,40);
cxt.lineTo(180,110);
cxt.arcTo(180,130,160,130,20);
cxt.moveTo(160,130);
cxt.lineTo(40,130);
cxt.arcTo(20,130,20,110,20);
cxt.moveTo(20,110);
cxt.lineTo(20,40);
cxt.arcTo(20,20,40,20,20);
cxt.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
二次贝塞尔曲线
在Canvas中，对于画弧线，我们可以使用arc()方法或arcTo()方法来实现。但是如果是画曲线，我们一般都是使用贝塞尔曲线来实现
在Canvas中，我们可以使用quadraticCurveTo()方法来画二次贝塞尔曲线。
语法
cxt.quadraticCurveTo(cx, cy, x2, y2);
说明
(cx , cy)表示控制点的坐标，(x2 , y2)表示结束点的坐标。
绘制一条二次贝塞尔曲线，我们同样也需要3个点的坐标：开始点、控制点和结束点。
其中，开始点一般由moveTo()或lineTo()提供，而控制点和结束点由quadraticCurveTo()提供。
三次贝塞尔曲线
在Canvas中，我们可以使用bezierCurveTo()方法来绘制三次贝塞尔曲线.。
语法
cxt.bezierCurveTo(cx1 , cy1, cx2, cy2, x, y);
说明
(cx1 , cy1)表示控制点1的坐标，(cx2 , cy2)表示控制点2的坐标，(x ,y)表示结束点的坐标。
绘制一条三次贝塞尔曲线，我们需要4个点：开始点、控制点1、控制点2和结束点。其中，开始点一般由moveTo()或lineTo()提供，bezierCurveTo()提供控制点1、控制点2和结束点。 cxt.bezierCurveTo(cx1 , cy1, cx2, cy2, x, y);
