原创。 利用HTMLcanvas画笔的createRadialGradient方法，创建同心嵌套辐射状五色环。 依次使用这五种颜色，变换画面，以产生动画效果。 演示见： http://runjs.cn/detail/50sb8vmy 1. [图片] radial.pn
利用 HTML canvas 画笔的 createRadialGradient 方法，创建 同心嵌套辐射状五色环。
依次使用这五种颜色，变换画面，以产生动画效果。
演示见：
http://runjs.cn/detail/50sb8vmy
1. [图片] radial.png
2. [文件] radius_2.html ~ 1KB 下载(3)
<html>
<head>
<meta charset="utf-8" />
<title>嵌套辐射状颜色环动画效果</title>
<script>
var ticker=0;
//设置五种颜色的数组
var col = new Array("blue","green","yellow","red","orange");
function drawBackground(){
var g=document.getElementById("myCanvas").getContext("2d");
//创建放射状、圆形渐变对象，设置嵌套辐射状颜色环的圆心位置、 半径范围，
var grd=g.createRadialGradient(300,300,300, 300,300,5);
var i=0;
do {// % (取余)，保证颜色数组 col 的下标不出界
grd.addColorStop(i/5,col[(i+++ticker)%col.length]);
}while (i<5); //每帧 依次由五种辐射状颜色环组成
ticker++;//循环使用颜色，产生动画效果
g.fillStyle=grd; //为画笔设置好do循环语句搞定的涂料结构grd
g.arc(300,300,300,0,2*Math.PI);//设置好园的轨迹（路径）
g.fill();// 用设置好的画笔涂料结构，填充园轨迹所圈定的园
}
function preperation(){
setInterval('drawBackground()',500);
}
</script>
</head>
<body onLoad="preperation()">
<canvas id="myCanvas" width="800" height="800" ></canvas>
</body>
</html>