html5学习：使用canvas画曲线_H5之家 - 中国HTML5教程资源分享第一站

html5学习：使用canvas画曲线

2014-08-14 23:57:47 阅读1249次

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

所谓弧度就是一个圆周的一部分，可以用圆心（参数1、2）和圆的扇形半径（参数3）来表示。为了表示弧度的范围，必须定义弧度的起点（参数4）和终点（参数5），以及它的方向（参数6）。

示例画一个简单的弧度：

<!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 );

下面是示意图：

html5-canvas-quadratic-curves-diagram[1].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个控制点在拉动曲线。如下图：