h5canvas implémente le code d'effet de tableau rectangulaire Matrix-Tutoriel H5-php.cn

h5canvas implémente le code d'effet de tableau rectangulaire Matrix

零下一度

Libérer： 2017-05-13 15:51:13

original

2753 Les gens l'ont consulté

J'ai vu Che Dabang écrire un article sur la mise en œuvre du tableau rectangulaire Matrix dans le parc du blog. J'ai senti que la toile avait encore des endroits merveilleux, alors j'ai pris note pour l'enregistrer.

L'effet obtenu est le suivant :

h5canvas implémente le code deffet de tableau rectangulaire Matrix

Vraiment, le simple ajout d'une ou deux lignes de code clés peut obtenir des effets inattendus.

Puisqu'il est implémenté par canvas, la première étape consiste à ajouter la balise canvas à la page, comme suit :

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

Copier après la connexion

code css :

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

Copier après la connexion

L'effet est que le canevas s'affiche en plein écran dans le navigateur. L'étape suivante consiste à attribuer la largeur et la hauteur de l'écran au canevas, comme suit :

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;

Copier après la connexion

Créer une 2D. dessin<🎜 de la toile >Environnement, comme suit :

var ctx = canvas.getContext(&#39;2d&#39;);

Copier après la connexion

Ensuite, créez un

tableau À quoi sert un tableau C'est principalement à utiliser ? le tableau pour stocker la valeur Y du texte dans le canevas. Si vous ne comprenez pas, vous comprendrez tout après l’avoir lu.

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

Copier après la connexion

La valeur de num est de diviser la largeur de l'écran en nombre de parties, c'est-à-dire en nombre de colonnes. La largeur de chaque colonne est de 10 pixels.

Code de dessin Canvas :

var draw = function() {
        ctx.fillStyle = &#39;rgba(0,0,0,.05)&#39;; //核心代码，创建黑色背景，透明度为0.05的填充色。
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = &#39;#0f0&#39;; //设置了字体颜色为绿色
        ctx.font = &#39;10px Microsoft YaHei&#39;;//设置字体大小与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;
            }
        }
    }

Copier après la connexion

ctx.fillStyle = 'rgba(0,0,0,.05)' dans le code Puisque la page appelle cette méthode de dessin à plusieurs reprises, La transparence est également superposée, de sorte que la couleur du texte à l'intérieur change également et que tout semble 3D et superposé. La fonction principale de la

boucle for

dans le code

est de définir le texte. La méthode String.fromCharCode() est utilisée pour transmettre la valeur Unicode et renvoyer une chaîne pour plus d'informations. , vous pouvez consulter le résumé JavaScript des méthodes et exemples de séries (1)

Ensuite, définissez la position de la police, par exemple, la position de la police de la première ligne est [10,10], [20,10], [ 30,10].... .;Les positions de police de la deuxième ligne sont [20,20],[30,20],[40,20]... et sont dérivées dans l'ordre.

Donc, dans le code var y = Array(num).join(0).split(''); consiste à enregistrer la valeur y de la position de la police, puis +10 en séquence via la boucle for .Maintenant, j'estime que je connais le tableau. La fonction est de mettre à jour l'emplacement.

La dernière chose est d'appeler cette méthode à plusieurs reprises :

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

Copier après la connexion

La méthode

map utilisée pour implémenter la méthode draw en ligne est en fait la idem. Collez le 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(&#39;&#39;);
        var ctx = q.getContext(&#39;2d&#39;);

        var draw = function() {
            ctx.fillStyle = &#39;rgba(0,0,0,.05)&#39;;
            ctx.fillRect(0, 0, width, height);
            ctx.fillStyle = &#39;red&#39;;
            ctx.font = &#39;10pt Georgia&#39;;
            yPositions.map(function(y, index) {
                text = String.fromCharCode(1e2 + Math.random() * 33);
                x = (index * 10) + 10;
                q.getContext(&#39;2d&#39;).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);

        }
    });

Copier après la connexion

Enfin, le code global :

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

Copier après la connexion

[Recommandations associées]

1 .

Spécial recommandé : Téléchargement de la version V0.1 de "php Programmer Toolbox"

Tutoriel vidéo en ligne h5 gratuit 3.

Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!