HTML5中用canvas绘制径向渐变
HTML5中canvas元素除了绘制线性渐变以外，还可以绘制径向渐变。径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。比如在描绘太阳是，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变。
canvas绘制径向渐变的脚本文件：
<!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之间的浮点数来作为渐变转折点的偏移量。
相关推荐
nercon 2020-03-06
zsh 2020-03-01
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15