HTML5教程实例-用Canvas制作径向渐变图形
上节课，我们学习了如何使用Canvas绘制线性渐变图形，今天我们来学习一下如何绘制径向渐变图形。通过上节课的学习，我们知道绘制线性渐变图形用到了一个非常重要的函数——createLinearGradient();如果我们要绘制径向渐变我们也有类似的方法，如下：
context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
Powered by
xStart：渐变起始点的横坐标
yStart：渐变起始点的纵坐标
xEnd：渐变结束点横坐标
yEnd：渐变结束点纵坐标
radiusStart：渐变开始圆的半径
radiusEnd：渐变结束圆的半径
最后我们通过上节课学习的addColorStop方法就可以绘制出非常漂亮的渐变了，他同样也需要设定个0-1之间的浮点数来作为渐变转折点的偏移量。
整个代码案例与上节课一样，只不过：
把createLinearGradiend()方法换成createRadialGradient()方法
参数由4个增加到6个
addColorStop()偏移量设置，由原来的2个增加到3个
<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>HTML5教程实例-用Canvas制作径向渐变图形</title><scripttype="text/javascript">window.onload=function(){varcanvas=document.getElementById("W3Cfuns_canvas");varcontext=canvas.getContext("2d");varg1=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);varn=0;varg2=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(vari=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><body><canvasid="W3Cfuns_canvas"width="600"height="400"></canvas></body></html>
本文原地址：/sitejs-12751-1.html
