canvas绘制网格射线效果
分类：实例代码
canvas绘制网格射线效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了利用canvas绘制网格射线的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
background: #000;
overflow: hidden;
margin: 0;
padding: 0;
}
canvas {
width: 45%;
margin: 5% 30%;
}
</style>
</head>
<body>
<canvas id="canv" width="600" height="600"></canvas>
<script type="text/javascript">
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 + ')';
}
</script>
</body>
</html>
canvas绘制网格射线效果，这样的场景在实际项目中还是用的比较多的，关于canvas绘制网格射线效果就介绍到这了。