原創。產生的動畫效果：

*?生成文字漸變顏色隨時間的變化。

*?使得一組同心圓的取色，隨時間而變化

1.[圖片] open_source.png

2.[代碼][JavaScript]代碼

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);

}

同心圓

#myCanvas{

width:900;

height:600;

position:absolute;left;0px;top;0px;

}

Your browser does not support the HTML5 canvas tag.

總結

以上是生活随笔為你收集整理的如何用html5编写彩色同心圆,HTML5 canvas 同心圆动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。