使用径向渐变的方式可以绘制有渐变色的圆形，只要调用上下文环境对象“cxt”中的create RadialGradient（）方法即可。具体格式如下：
■参数cxt：表示获取的上下文对象名称。
■参数xStart：表示开始渐变圆心的横坐标。
■参数yStart：表示开始渐变圆心的纵坐标。
■参数radiusStart：表示开始渐变圆的半径。
■参数xEnd：表示结束渐变圆心的横坐标。
■参数yEnd：表示结束渐变圆心的纵坐标。
■参数radiusEnd：表示结束渐变圆的半径。
在调用createRadialGradient（）方法时，从开始渐变圆心的坐标位置向结束渐变圆心的坐标位置进行颜色渐变，即两个圆之间通过各自的圆心坐标连接成一条直线，起点为开始圆心，终点为结束圆心，色彩由起点向终点进行扩散，直至终点圆外框。使用方法createRadiaI Gradient（）仅新建了一个径向渐变的对象，接下来需要通过方法addColorStop（）为该对象添加偏移量与渐变色，并将该对象设置为“fillStyle”属性的值。最后，调用方法fill（）在画布中绘制出一个有径向渐变色彩的圆形。
下面将通过一个实例讲解在网页中绘制一个渐变圆形的方法。(www.xing528.com)
在本实例的页面中新建了一个<canvas>元素，当加载页面时通过调用方法createRadial Gradient（）创建一个渐变对象，将该对象设置为“fillStyle”属性的值，在画布中绘制一个径向渐变的圆。实例文件9.html的代码如下。
编写脚本文件js9.js，设置当获取上下文环境对象“cxt”后，首先调用该对象的createRadiaI Gradient（）方法创建一个渐变对象“gnt”；然后通过“gnt”对象的addColorStop（）方法，为渐变对象增加三种用于渐变的偏移量与颜色值，当绘制完圆路径后，将渐变对象“gnt”赋值给“fillStyle”属性；最后根据“fillStyle”属性值，使用方法fill（）在画布中绘制一个有径向渐变的圆形图案。为了增加实体圆的边框效果，以相同的参数再次调用arc（）方法，在实体圆的基础上绘制一个边框圆形。文件js9.js的代码如下。
执行后的效果如图6-9所示。
图6-9 执行效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
