Эффект матрицы на HTML5 и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> $(document).ready(function() { var s = window.screen; var width = 500; var height = 400; var yPositions = Array(300).join(0).split(''); var ctx = q.getContext('2d'); var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.1)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#0F0'; ctx.font = '10pt Georgia'; yPositions.map(function(y, index) { text = String.fromCharCode(1e2 + Math.random() * 33); x = (index * 10) + 10; q.getContext('2d').fillText(text, x, y); if (y > 100 + Math.random() * 1e4) { yPositions[index] = 0; } else { yPositions[index] = y + 10; } }); }; RunMatrix(); function RunMatrix() { if (typeof Game_Interval != "undefined") clearInterval( Game_Interval); Game_Interval = setInterval(draw, 33); } function StopMatrix() { clearInterval(Game_Interval); } //setInterval(draw, 33); }); </script> |
|
1 |
<canvas id="q" width="500" height="400">Sorry Browser Won't Support</canvas> |
