HTML5中用canvas绘制径向渐变

HTML5中canvas元素除了绘制线性渐变以外，还可以绘制径向渐变。径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。比如在描绘太阳是，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变。HTML5移动开发即学即用（双色） PDF+源码 http://www.linuxidc.com/Linux/2013-09/90351.htmHTML5入门学习笔记 http://www.linuxidc.com/Linux/2013-09/90089.htmHTML5移动Web开发笔记 http://www.linuxidc.com/Linux/2013-09/90088.htmHTML5 开发中的本地存储的安全风险 http://www.linuxidc.com/Linux/2013-06/86486.htm《HTML5与CSS3权威指南》及相配套源码 http://www.linuxidc.com/Linux/2013-02/79950.htm关于 HTML5 令人激动的 10 项预测 http://www.linuxidc.com/Linux/2013-02/79917.htmHTML5与CSS3实战指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htmcanvas绘制径向渐变的脚本文件：<！DOCTYPE html><head><metacharset="UTF-8"/><script>function draw（id）{var canvas = document.getElementById（id）;if（canvas ==null）returnfalse;var context = canvas.getContext（"2d"）;var g1 = context.createRadialGradient（400,0,0,400,0,400）;g1.addColorStop（0.1,"rgb（255,255,0）"）;g1.addColorStop（0.3,"rgb（255,0,255）"）;g1.addColorStop（1,"rgb（0,255,255）"）;context.fillStyle = g1;context.fillRect（0,0,400,300）;var n =0;var g2 = context.createRadialGradient（250,250,0,250,250,300）;g2.addColorStop（0.1,"rgba（255,0,0,0.5）"）;g2.addColorStop（0.7,"rgba（255,255,0,0.5）"）;g2.addColorStop（1,"rgba（0,0,255,0.5）"）;for（var i =0; i <10; i++）{context.beginPath（）;context.fillStyle = g2;context.arc（i *25, i *25, i *10,0,Math.PI *2,true）;context.closePath（）;context.fill（）;}}</script></head><bodyonLoad="draw（"canvas"）;"><canvasid="canvas"width="400"height="300"/></body></html>createRadialGradient（）方法创建一条放射颜色渐变，这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。createLinearGradient（xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd）xStart, yStart 开始圆的圆心的坐标，radiusStart 开始圆的直径，xEnd, yEnd 结束圆的圆心的坐标，radiusEnd 结束圆的直径。上面的实例中，分别指定了两个圆的大小和位置。从第一个圆的圆心处像外进行扩散渐变，一直扩散到第二个圆的外轮廓出。在设定颜色时，与线性渐变相同，使用addColorStop方法进行设定即可。同样也需要设定0-1之间的浮点数来作为渐变转折点的偏移量。本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-06/102818.htm