《HTML5 canvas开发详解（第2版）》——2.5　高级路径方法

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.5节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5　高级路径方法

接下来，深入探讨一下其他绘制路径的方法，包括弧线和曲线，以组合成复杂的图像。

2.5.1　弧线有4种函数可以绘制弧线和曲线。弧线可以是一个整圆，也可以是圆的任何一部分。

1．context.arc()context.arc()的使用方法如下：

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x和y定义圆心的位置，radius定义弧线的半径。startAngle和endAngle使用弧度值，而不是角度值。anticlockwise的值可以是true或false，用于定义弧线的方向。例如，绘制一个圆心在（100，100），半径为20的圆（见图2-4），可以使用下面这段drawScreen()代码。

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);

例2-4显示了创建一个简单圆形所必须的代码。

例2-4　圆弧 function drawScreen(){ 　　　context.beginPath(); 　　　context.strokeStyle = "black"; 　　　context.lineWidth = 5; 　　　context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false); 　　　//整圆 　　　context.stroke(); 　　　context.closePath(); }

注意，这里应将起始角度（0）和结束角度（360）乘以（Math.PI/180）来将其转换为弧度。使用0和360可以创建一个完整的圆形。

如果不以0和360作为起止点，则可以绘制出一段圆弧。下面这段drawScreen()代码将按顺时针方向画1/4个圆，如图2-5所示。

context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

https://yqfile.alicdn.com/6aeb077f337d8182ca4fcc0656096ab703ba38b5.png" >

如果要画0～90以外的部分（见图2-6），可以将anticlockwise值设置为true。

context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);

2．context.arcTo()context.arcTo()的使用方法如下：

context.arcTo(x1, y1, x2, y2, radius)

只有最新的一些浏览器支持arcTo方法——或许是因为其能力可以被arc()函数替代的原因。这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到（x1，y1）点的直线相切，圆弧的终点与（x1，y1）点到（x2，y2）的直线相切。

context.arcTo方法要求当前路径至少有一个子路径。那么，如果从（0，0）到（100，200）画一条直线，然后创建一条小弧线，这看起来会有点像一个钢丝衣架（没有更好的比喻了），如图2-7所示。

context.moveTo(0,0); context.lineTo(100, 200); context.arcTo(350,350,100,100,20);

https://yqfile.alicdn.com/566f57575628b033f675762037d42f9948866ff0.png" >

2.5.2　贝塞尔曲线贝塞尔曲线要比弧线灵活得多，它有立方和平方两种形式：

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)； context.quadraticCurveTo(cpx, cpy, x, y)。

在二维空间中，贝塞尔曲线通过“起点”、“终点”以及两个决定曲线走向的“控制”点定义完成。一个普通的立方贝塞尔曲线使用两个点，平方贝塞尔曲线使用一个点。平方贝塞尔曲线是最简单的曲线（见图2-8），只需要终点以及一个控制点即可完成绘制。

context.moveTo(0,0); context.quadraticCurveTo(100,25,0,50);

这条曲线从（0，0）开始，到（0，50）结束。用来创建弧线的点位于（100，25），这个点大致上是圆弧的圆心。控制点的x值为100，把弧线拉伸成一个细长的曲线。

立方贝塞尔曲线具有两个控制点，因此带来了更多的选择，从而能够很容易地绘制出经典的“S”形曲线，如图2-9所示。

context.moveTo(150,0); context.bezierCurveTo(0,125,300,175,150,300); <div style="text-align: center">

https://yqfile.alicdn.com/3b76d29219e79c27e25390e834e0f125a0219df8.png" >

相关资源：从入门到精通HTML5——PDF——网盘链接