Canvas implements the matrix of black guest empire Rectangles and canvas black guest empire rectangles

Canvas implements the matrix of black guest empire Rectangles and canvas black guest empire rectangles

In the blog Park, I saw che da bang and wrote an article about implementing the matrix of the matrix. I think canvas still has some wonderful places, so I should take a note to record it.

The implementation result is as follows:

It is really one or two lines of key code that can achieve unexpected results.

Because it is implemented by canvas, the first step is to add the canvas label on the page, as shown below:

<Canvas id = "canvas"> use a later browser, IE8, or canvas not supported </canvas>

Css code:

html,body{height:100%;overflow:hidden}

The result is that the canvas is displayed in the browser in full screen mode. The next step is to assign the screen width and height to the canvas, as shown below:

var width,height,  canvas = document.getElementById("canvas");  canvas.width = width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;  canvas.height = height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Create a 2D drawing environment for the canvas as follows:

var ctx = canvas.getContext('2d');

Create an array and use an array to store the Y value of the text in the canvas. If you don't understand it, it's all clear.

 var num = Math.ceil(width / 10); var y = Array(num).join(0).split('');

The value of num is to divide the screen width into num portions, that is, the num column. The width of each column is 10px.

Canvas drawing code:

Var draw = function () {ctx. fillStyle = 'rgba (0.05, 0,. 05) '; // The core code creates a black background with a fill color transparency. Ctx. fillRect (0, 0, width, height); ctx. fillStyle = '#0f0'; // set the font color to green ctx. font = '10px Microsoft yahei'; // set the font size and family for (I = 0; I <num; I ++) {var x = (I * 10) + 10; text = String. fromCharCode (65 + Math. random () * 62); var y1 = y [I]; ctx. fillText (text, x, y1); if (y1> Math. random () * 10 * height) {y [I] = 0;} else {y [I] = parseInt (y [I]) + 10 ;}}}

Ctx in the code. fillStyle = 'rgba (0, 0, 0 ,. 05) ', because the draw method is repeatedly called on the page, the transparency is also superimposed, so that the text color in it also changes, and all looks 3D and have a sense of attention.

The main function of the for loop in the code is to set text and use String. fromCharCode () method, which transmits Unicode values and returns a string. For more information, see the JavaScript series methods and instance Summary (1)

Set the font position, for example, the font position of the first line [10, 10], [20, 10], [30, 10] ......; font position of the second line [20, 20], [30, 20], [40, 20]... derivation.

So var y = Array (num) in the code ). join (0 ). split (''); stores the y value of the font position, and then increases by 10 through the for loop. It is estimated that the array is used to update the position.

The last step is to call this method repeatedly:

;(function(){        setInterval(draw, 100);    })();

The map method used to implement the draw method on the internet is actually the same. paste the Code:

$(document).ready(function() {        var s = window.screen;        var width = q.width = s.width;        var height = q.height;        var yPositions = Array(300).join(0).split('');        var ctx = q.getContext('2d');        var draw = function() {            ctx.fillStyle = 'rgba(0,0,0,.05)';            ctx.fillRect(0, 0, width, height);            ctx.fillStyle = 'red';            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 > Math.random() * 1e4) {                    yPositions[index] = 0;                } else {                    yPositions[index] = y + 10;                }            });        };        RunMatrix();        function RunMatrix() {            Game_Interval = setInterval(draw, 1000);        }    });

Finally, the overall code is as follows:

<Canvas id = "canvas"> use a later browser, IE8, or window that does not support canvas </canvas> <script type = "text/javascript">. onload = function () {var width, height, canvas = document. getElementById ("canvas"); canvas. width = window. innerWidth | document.doc umentElement. clientWidth | document. body. clientWidth; canvas. height = window. innerHeight | document.doc umentElement. clientHeight | document. body. clientHeigh T; var ctx = canvas. getContext ('2d '); var num = Math. ceil (width/10); var y = Array (num ). join (0 ). split (''); var draw = function () {ctx. fillStyle = 'rgba (0, 0, 0 ,. 05) '; // The core code. Create a black background with a fill color of 0.05 transparency. Ctx. fillRect (0, 0, width, height); ctx. fillStyle = '#0f0'; // set the font color to green ctx. font = '10px Microsoft yahei'; // set the font size and family for (I = 0; I <num; I ++) {var x = (I * 10) + 10; text = String. fromCharCode (65 + Math. random () * 62); var y1 = y [I]; ctx. fillText (text, x, y1); if (y1> Math. random () * 10 * height) {y [I] = 0;} else {y [I] = parseInt (y [I]) + 10 ;}}}; (function () {setInterval (draw, 100) ;}) () ;}</script>

Reference: http://www.cnblogs.com/chedabang/p/6291504.html