原创：HTML5canvas辐射环元素图案RadialGradientTexture。具体做法如下： 1.在隐形（display:none;）画布unit上，画出图案单元。它是一个设置了5种颜色的放射状/圆形渐变环。 2.画布myCanvas的画笔
1. 在隐形（display:none;）画布 unit 上，画出图案单元。它是一个设置了5种颜色的放射状/圆形渐变环。
2. 画布 myCanvas 的画笔 为 g。 调用 g 的 createPattern( img,'repeat') 方法， 以便 在水平和垂直方向重复绘制元素 img。
3. 通过 ticker 的 自增，使得下次使用颜色数组，均后错一个元素，从而产生动画效果。
演示见：
http://runjs.cn/detail/niaowhwm
1. [图片] An_Array_Of_Loudspeakers.png
2. [代码][JavaScript]代码
<html>
<meta charset="utf-8">
<head>
<title>辐射环元素图案RadialGradientTexture</title>
<script>
function draw_myCanvas(){
var g = document.getElementById("myCanvas").getContext("2d");
drawUnit(); //在不显示的画布 “unit” 上，完成辐射环元素的绘制
var img=document.getElementById("unit");//设 img 为辐射环元素的引用
//设置画笔的填充模式为：在水平和垂直方向重复绘制辐射元素 img
var pat=g.createPattern(img,'repeat');
g.rect(0,0,400,300);
g.fillStyle=pat;
g.fill();
}
var ticker=0;
var col = new Array("#F0AAFA","#00AAF0","#00AA7F","#008F00","#00AA7F");
var d=0;
var inc=true;
function drawUnit(){//在不显示的画布 “unit” 上，完成辐射环元素的绘制
var g = document.getElementById("unit").getContext("2d");//取画笔 g
g.fillStyle="#0ff"; //设置画布底色
g.fillRect(0,0,100,100); //涂底色
//创建放射状/圆形渐变对象 grd
var grd=g.createRadialGradient(50,50,50, 50,50,1);
var i=0;
do { //为放射状/圆形渐变对象设置5种颜色结构
grd.addColorStop(i/5,col[(i++ + ticker)%col.length]);
//% (取余) 确保颜色数组 col 的下标不出界
}while (i<5);
//ticker 自增，使得下次使用颜色数组时，均后错一个元素，从而产生动画效果
ticker++;
g.fillStyle=grd; //搞定画笔的涂抹内容
g.arc(50,50,49,0,2*Math.PI);//圈定涂抹范围
g.fill();//涂抹(填充)}
}
function preperation(){
//每半秒钟，调用一次draw_myCanvas()
setInterval('draw_myCanvas()',500);
}
</script>
<style>
#unit{
display:none;
}
div{
font-family:"楷体";
font-size:25px;
font-weight:900;
color:#00F;
}
#myCanvas{
border:solid brown 10px;
}
</style>
</head>
<body onLoad="preperation()">
<div>喇叭阵 The Array of Loudspeakers</div>
<canvas id="myCanvas" width="400" height="300" >
<p>Your browserdoes not support the canvas element!</p></canvas>
<canvas id="unit" width="100" height="100" ></canvas>
</body>
</html>