经常看见网站上一些放射线动画，出于程序员的好奇，divcss5小编也做了一款帆布实现的放射线动画，代码如下：

！声明文档类型

超文本标记语言

头

meta charset='UTF-8 '

标题/头衔

风格

正文{ background: # 000隐藏飞越：边距：0；padd : 0；}

# canv { width : 45%；保证金： 5% 30%;动画：转轮-旋转30s线性无限；}

@关键帧滚轮-旋转{

来自{

变压器：旋转(0度);

}

to {

变压器：旋转(360度);

}

}

/style

/head

身体

画布id='canv '宽度='600 '高度=' 600 '/画布

脚本类型='text/javascript '

var c；

var $；

var w=600

var h=600

常数=15;

var rad=300

var time out=0；

c=文档。getelementbyid(' canv ')；

$=c . GetContext(' 2d ')；

画线()；

函数drawLines() {

$.fillRect(0，0，w，h)；

$.翻译(w/2，h/2)；

for(var I=0；i 25i ) {

for(var n=-45；n=45n=常数){

setTimeout(' draw(' n ')；',100 *超时);

超时；

}

}

}

函数draw(n)

$.begin path()；

$.moveTo(0，rad)；

定义变量弧度=数学/180 * n；

var x=(rad * Math.sin(弧度))/Math.sin(数学)。/2-弧度);

$.lineTo(x，0)；

if(数学。ABS(n)=45){

$.strokeStyle=RNDcolor()；

$.线宽=2;

} else if (n==0) {

$.strokeStyle='rgb(200，200，200)'；

$.线宽=.5;

} else {

$.strokeStyle='rgb(110，110，110)'；

$.线宽=.5;

}

$.stroke()；

$.旋转((数学. PI/180)* 15)；

}

函数rndColor() {

var r=255*Math.random()|0，

g=255*Math.random()|0，

b=255 *数学。random()| 0；

返回“RGB('r '，' g '，' b ')”；

}

函数myrefresh(){

//窗口。位置。重载()；

//drawLines()

}

//setTimeout('myrefresh()'，100 * 175)；

/script

/body

/html