html5的canvas不仅可以画直线，也可以画曲线哦。画直线的方法是：
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
context.beginPath();//直线开始
context.moveTo(100, 150);//直线的起点
context.lineTo(450, 50);//直线的终点
context.lineWidth = 15;//直线的宽度
context.strokeStyle='rgb(255,0,0)';//直线的颜色
context.lineCap='square';//直线端点：round、butt、square
context.stroke();//直线结束1、曲线的弧度
html5曲线弧度的方法是arc()，其有6个参数：
context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
分别表示为：弧度的圆心x、y，半径，开始角度，结束角度，是否逆时针，如下图
![html5-canvas-arcs-diagram[2].png](/ZBlogFile/ueditor/jsp/upload/image/20140814/1408031939771072847.png "1408031939771072847.png")
所谓弧度就是一个圆周的一部分，可以用圆心（参数1、2）和圆的扇形半径（参数3）来表示。为了表示弧度的范围，必须定义弧度的起点（参数4）和终点（参数5），以及它的方向（参数6）。
参数1：圆心x
参数2：圆心y
参数3：半径
参数4：开始弧度
参数5：结束弧度
参数6：是否为逆时针方向，默认false
示例画一个简单的弧度：
<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas{
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
function PI(deg)
{
return deg/180*Math.PI;
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pi=Math.PI;
context.beginPath();
context.arc(200, 200, 100, PI(-90), PI(0), false);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>画了一个圆心为200,100，半径为100，弧度为90度的，起点为0度，终点为-90的顺时针圆弧。在这里必须要强调的是，画圆弧一定要对角度计算正确了，圆弧角度的方向也是顺时针的，并且水平右的角度为0。当然，如果因为PI的关系会弄混淆的话，可以使用示例的PI(deg)函数来把度数转换为PI的形式。
当然，弧度和直线一样，也可以使用ctrokeStyle/lineWidth/lineCap。
2、二次曲线
二次曲线也称圆锥曲线或圆锥截线，是直圆锥面的两腔被一平面所截而得的曲线。当截面不通过锥面的顶点时，曲线可能是圆、椭圆、双曲线、抛物线。当截面通过锥面的顶点时，曲线退缩成一点、一直线或二相交直线。在截面上的直角坐标系(x,y)之下,这些曲线的方程是x,y的二元二次方程。
使用arc()方法绘制出来的圆是个正圆，如果想画椭圆的画就必须使用二次曲线方法（quadraticCurveTo()）。
context . quadraticCurveTo ( controlX , controlY , endX , endY );
参数1：控制点x
参数2：控制到y
参数3：结束点x
参数4：结束点y
下面是示意图：
![html5-canvas-quadratic-curves-diagram[1].png](/ZBlogFile/ueditor/jsp/upload/image/20140814/1408031755093078382.png "1408031755093078382.png")
一个控制点定义了二次曲线的曲率，通过创建两个虚构的切向线连接上下文点和结束点。上下文点定义函数moveTo()方法。移动控制点远离上下文点和结束点将创建尖锐的曲线，和移动控制点接近上下文点和结束点将创造更广泛的曲线。
值得说明的是，控制点是一个隐形的点，是不存在二次曲线上面的，它的存在是在无形的拉动整个曲线。曲线的起始点需要moveTo()函数指定，而参数的最后两个表示曲线的结束点，这一点比较怪，按理说所有的参数都应该放在同一个函数（比如：quadraticCurve()）里才比较合理。
示例简单：
<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pi=Math.PI;
context.beginPath();
context.moveTo(10, 290);
context.quadraticCurveTo(150, -200, 300, 290);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.lineCap='round';
context.stroke();
</script>
</body>
</html>当然，二次曲线和弧度一样，也可以使用ctrokeStyle/lineWidth/lineCap。
3、贝塞尔曲线
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。当然在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。
和二次曲线类似，它的函数是：bezierCurveTo()。贝塞尔曲线和二次曲线不同的是，它有2个控制点。二次曲线是有一个无形的控制点在拉动曲线，而贝塞尔曲线就是2个控制点在拉动曲线。如下图：
![html5-canvas-bezier-curves-diagram3].png](/ZBlogFile/ueditor/jsp/upload/image/20140814/1408031803102015932.png "1408031803102015932.png")
它完整的函数是：
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
当然，它的起始点也需要上下文使用moveTo函数指定。
简单的示例：
<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pi=Math.PI;
context.beginPath();
context.moveTo(10, 290);
context.bezierCurveTo(50,-200,150,200,500,290);
context.lineWidth = 10;
context.strokeStyle = '#444';
context.lineCap='round';
context.stroke();
</script>
</body>
</html>当然，贝塞尔曲线和二次曲线一样，也可以使用ctrokeStyle/lineWidth/lineCap。
-----------------------------------------------------
转载请注明来源此处
原地址：#
发表