原创。产生的动画效果： *生成文字渐变颜色随时间的变化。 *使得一组同心圆的取色，随时间而变化 1. [图片] open_source.png 2. [代码] [JavaScript]代码 htmlheadscriptvar c=new Array("red","blue","cya
* 生成文字渐变颜色随时间的变化。
* 使得一组同心圆的取色，随时间而变化
1. [图片] open_source.png
2. [代码][JavaScript]代码
<html>
<head>
<script>
var c=new Array("red","blue","cyan","darkGray","green","lightGrey","orange","pink","magenta","lightBlue","yellow","black");
var d =220;
var x0=200;
var y0=200;
var ticker =0; //一组同心圆的取色，随 ticker 的递增而变化
var index=-595;//为文字设置渐变颜色，其范围随index变化而变。
var direction=1;
function drawName(){
var canvas =document.getElementById("myCanvas");
var gg =canvas.getContext("2d");
var gradient=gg.createLinearGradient(index,0,600,0);
if (direction==1) index = index + 5;
else if (direction==0) index = index - 5;
if (index==600) direction=0;
if (index==-600) direction=1;
for (var i=0;i<=10;i++)//设立渐变填色
gradient.addColorStop(i/10,c[i]);
// 让画笔 gg 使用渐变填色
gg.fillStyle=gradient;
gg.font ="100px KAITI";
gg.fillText("开源中国",20, 80);
}
function draw() {
drawConcentric( 210, 300);
}
function drawConcentric( x0, y0){
var canvas =document.getElementById("myCanvas");
var gg =canvas.getContext("2d");
for (var i=1; i<11; i++){
gg.fillStyle=c[(i+ticker)%c.length];//取余，保证下标有效
gg.beginPath();
gg.arc(x0,y0, d - 20*i , 0, 2*Math.PI);
gg.fill();
}
ticker++; //一组同心圆的取色，随 ticker 的递增而变化
}
function preparation(){;
setInterval('drawConcentric(220,300)',500)
setInterval('drawName()',50);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>同心圆</title>
<style>
#myCanvas{
width:900;
height:600;
position:absolute;left;0px;top;0px;
}
</style>
</head>
<body onLoad="preparation()">
<canvas id="myCanvas" width="980" height="650">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>