- <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>
- //该片段来自于http://www.codesnippet.cn/detail/2211201615157.html
来源: http://www.codesnippet.cn/detail/2211201615157.html