Canvas实现放射线动画

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

<!DOCTYPE html>

<html>

<head>

<style>

body {background: #000;overflow: hidden;margin: 0;padding: 0;}

#canv {width: 45%;margin: 5% 30%;animation: wheel-rotate 30s linear infinite;}

@keyframes wheel-rotate {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

</style>

</head>

<body>

var c;

var $;

var w = 600;

var h = 600;

constant = 15;

var rad = 300;

var timeout = 0;

c = document.getElementById("canv");

$ = c.getContext("2d");

drawLines();

function drawLines() {

$.fillRect(0,0,w,h);

$.translate(w/2,h/2);

for (var i = 0; i < 25; i++) {

for (var n = -45; n <= 45; n+=constant) {

setTimeout("draw("+n+");",100 * timeout);

timeout++;

}

function draw(n){

$.beginPath();

$.moveTo(0,rad);

var radians = Math.PI/180*n;

var x = (rad * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);

$.lineTo(x,0);

if (Math.abs(n) == 45) {

$.strokeStyle=rndColor();

$.lineWidth=2;

} else if (n == 0) {

$.strokeStyle="rgb(200,200,200)";

$.lineWidth=.5;

} else {

$.strokeStyle="rgb(110,110,110)";

$.lineWidth=.5;

}

$.stroke();

$.rotate((Math.PI/180)*15);

}

function rndColor() {

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

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

b = 255*Math.random()|0;

return 'rgb(' + r + ',' + g + ',' + b + ')';

}

function myrefresh(){

//window.location.reload();

//drawLines()

}

//setTimeout('myrefresh()',100*175);

</script>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h18694.shtml