通过<canvas>不仅能够以各种平铺的方式绘制图像，而且还可以通过调用上下文对象中的方法clip（）切割画布中绘制的图像。clip（）方法的调用格式如下： cxt.clip（）
其中，“cxt”表示上下文环境对象名称，该方法是一个无参数方法，用于切割使用路径方式在画布中绘制的区域。因此在使用该方法前，必须使用路径的方式在画布中绘制一个区域，才能通过调用clip（）方法对该区域进行切割。
下面通过一个实例讲解在页面中切割指定的图像的方法。
实例文件13.html的代码如下。
编写脚本文件js13.js，设置当加载页面时会触发“onLoad”事件，在该事件中调用了自定义的函数pageload（），此函数的运作流程如下：
（1）创建一个“Image”对象，并设置该对象加载图像的路径。在加载图像过程中，第一次调用另外一个自定义函数drawCirc（），绘制一个圆形路径，并使用stroke（）方法将路径绘制在画布中。
（2）调用方法clip（）将画布中的圆形路径进行切割。其中在调用函数drawCirc（）时，参数“cxt”表示上下文环境对象名称，“intR”表示圆半径，“blnC”表示是否需要对绘制图形进行切割，“true”表示需要，“false”表示不需要。(www.xing528.com)
（3）使用drawImage（）方法在画布中绘制一个左上角坐标为（70，3）的图像。因为绘制图像前画布已按照圆形路径进行了切割，所以加载的图像也按照该切割后的圆形区域进行绘制。
（4）第二次调用自定义函数drawCirc（），绘制一个与第一个圆路径同圆心不同半径的小圆形，并设置“fillStyle”的属性值为“#fff”，通过fill（）方法进行填充，形成大圆套小圆的效果。文件js13.js的代码如下。
执行后的效果如图6-13所示。
图6-13 执行效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
