h5canvas implements the Matrix rectangular array effect code

I saw Che Dabang’s article about realizing the Matrix rectangular array in the blog park. I felt that there are still some wonderful places in canvas, so I made a note to record it.

The effect achieved is as follows:

Really, adding one or two key lines of code can achieve unexpected effects.

Since it is implemented by canvas, the first step is to add the canvas tag to the page, as follows:

<canvas id="canvas">请使用高版本浏览器，IE8以及一下不支持canvas</canvas>

css code:

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

Since the effect is that the canvas is full screen Displayed in the browser, all the next step is to assign the width and height of the screen to canvas, as follows:

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 2Ddrawing environment for canvas, as follows:

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

Create an array below. Why use an array? It is mainly to use the array to store the Y value of the Chinese text in the canvas. If you don’t understand, you’ll understand after reading it.

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

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

Canvas drawing code:

var draw = function() {
        ctx.fillStyle = 'rgba(0,0,0,.05)'; //核心代码，创建黑色背景，透明度为0.05的填充色。
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = '#0f0'; //设置了字体颜色为绿色
        ctx.font = '10px Microsoft YaHei';//设置字体大小与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.fillStyle = 'rgba(0,0,0,.05)' in the code. Since the page is repeatedly calling this draw method, the transparency is also When overlaying, the color of the text inside also changes, making everything look 3D and layered.

The main function of the for loop in the code is to set the text. The String.fromCharCode() method is used. The Unicode value is passed and the string is returned. For more information, you can view JavaScript Summary of series of methods and examples (1)

Then set the font position, for example, the font position of the first line is [10,10], [20,10], [30,10].... .;The font positions of the second line are [20,20],[30,20],[40,20]...and are derived in sequence.

So in the code var y = Array(num).join(0).split(''); is to save the y value of the font position, and then +10 in sequence through the for loop. Now I estimate that I know the array The function is to update the location.

The last step is to call this method repeatedly:

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

The map method used to implement the draw method online 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:

<canvas id="canvas">请使用高版本浏览器，IE8以及一下不支持canvas</canvas>

[Related recommendations]

1. Special recommendation："php Programmer Toolbox" V0.1 version download

2. Free h5 online video tutorial

3. php.cn original html5 video tutorial

The above is the detailed content of h5canvas implements the Matrix rectangular array effect code. For more information, please follow other related articles on the PHP Chinese website!