《HTML5 Canvas开发详解》——2.5　高级路径方法

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

2.5　高级路径方法

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

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

1．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(); }

https://yqfile.alicdn.com/05848324b99620fa5a1a65477400470e8e50d77c.png" > 图片 16

图2-4　圆

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

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

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

如果要画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(x1, y1, x2, y2, radius)

只有最新的一些浏览器支持arcTo方法，这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到（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);

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

https://yqfile.alicdn.com/00d1afb2894b2a83fcaf870dd39aa9f474c18aa8.png" >

2.5.3　Canvas裁切区域结合save()函数和restore()函数，Canvas裁切区域可以限制路径及其子路径的绘制区域。首先通过rect()函数设置一个用来绘图的矩形区域，然后调用clip()函数把用rect()函数定义的矩形设置为裁切区域。现在，无论在当前上下文绘制什么内容，它只显示裁切区域以内的部分。这也可以理解成是绘图操作的一种蒙版。例2-5显示如何操作，裁切结果如图2-10所示。

例2-5　Canvas裁切区域 function drawScreen(){ 　　　//在屏幕上绘制一个大方块 　　　context.fillStyle = "black"; 　　　context.fillRect(10, 10, 200, 200); 　　　context.save(); 　　　context.beginPath(); 　　　//裁切画布从（0，0）点至50*50的正方形 　　　context.rect(0, 0, 50, 50); 　　　context.clip(); 　　　//红色圆 　　　context.beginPath(); 　　　context.strokeStyle = "red"; //需要可用颜色列表 　　　context.lineWidth = 5; 　　　context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false); 　　　//整圆 　　　context.stroke(); 　　　context.closePath(); 　　　context.restore(); 　　　//再次裁切整个画布 　　　context.beginPath(); 　　　context.rect(0, 0, 500, 500); 　　　context.clip(); 　　　//绘制一个没有裁切的蓝线 　　　context.beginPath(); 　　　context.strokeStyle = "blue"; //需要可用颜色列表 　　　context.lineWidth = 5; 　　　context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false); 　　　//整圆 　　　context.stroke(); 　　　context.closePath(); }

例2-5首先在画布上画了一个200×200的黑色矩形，然后将Canvas裁切区域设置为rect(0,0,50,50)，clip()函数按照这些参数对画布进行裁切设置，所画的红色圆弧形只能看到在这个矩形以内的部分，最后将裁切区域调整回rect(0,0,500,500)并画一个新的蓝色圆弧，此时整个圆都能够看到。

提示：也可以将其他Canvas方法配合裁切区域使用，最常见的的是arc()函数。

arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise)

这可以创建一个圆形的裁切区域，而不是矩形的裁切区域。

相关资源：HTML5 Canvas 开发详解（第二版）.pdf