canvas字母雨效果代码实例
分类:实例代码
看过黑客帝国电影的朋友一定知道字母像是下雨一样滑下的效果。
下面就通过代码实例介绍一下如何利用canvas实现此效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { margin: 0px auto; } #q { width: 100%; height: 100%; margin: 0px auto; } </style> <script type="text/javascript"> window.onload = function () { var q = document.getElementById('q'); var width = q.width = document.documentElement.clientWidth; var height = q.height = document.documentElement.clientHeight; var letters = Array(256).join(1).split(''); var draw = function () { q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)'; q.getContext('2d').fillRect(0, 0, width, height); q.getContext('2d').fillStyle = '#0F0'; letters.map(function (y_pos, index) { text = String.fromCharCode(65 + Math.random() * 26); x_pos = index * 10; q.getContext('2d').fillText(text, x_pos, y_pos); letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10; }); }; setInterval(draw, 33); } </script> </head> <body> <canvas id="q"></canvas> </body> </html>
canvas字母雨效果代码实例,这样的场景在实际项目中还是用的比较多的,关于canvas字母雨效果代码实例就介绍到这了。
canvas字母雨效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
