简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Comment js drawImage produit-il un déchirement et un scintillement d'image? Comment la logique du code suivant est-elle implémentée?
阿神
阿神 2017-05-31 10:41:26
0
1
1029

Vous pouvez ouvrir directement le lien pour voir l'effet : http://evilzone.org/. Ci-dessous son code 

<!DOCTYPE html>
<!-- saved from url=(0020)http://evilzone.org/ -->
<html><!-- Hello :) --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title>Evilzone - Hacking and Security Network</title>

        <style>

            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;

                background-color: #191919;

                font-family: Arial, Helvetica, sans-serif;
            }

            .box {
                color: #c8c8c8;

                padding: 20px;
                margin: 20px;
                border: solid #404040 1px;
                outline: solid #101010 1px;
                background-color: #252525;

                width: 610px;

                margin-left: auto;
                margin-right: auto;
                margin-top: 50px;
            }


            .leCanvas {
                border: solid #404040 1px;
                 outline: solid #101010 1px;
                 background-color: #202020;

                padding: 10px;
            }

        </style>

    </head>
    <body>

        <p class="box">
            <canvas id="canvas" class="leCanvas" width="590" height="128"></canvas>
        </p>


        <script>

            var canvas = document.getElementById('canvas')
              , context = canvas.getContext('2d')
              , img = new Image()
              , w
              , h
              , offset
              , glitchInterval;

            img.src = 'logo.png';
            img.onload = function() {
                 init();
                window.onresize = init;
            };

            var init = function() {
                clearInterval(glitchInterval);//清除定时器
                canvas.width = w = img.width;//将图片的宽度赋值给w，并将画布的宽度设为图片的宽度
                offset = w * .1;//设置偏移量为w*0.1
                canvas.height = h = img.height;//将画布的高度设为图片的高度
                glitchInterval = setInterval(function() {
                    clear();//每一帧清除前一帧
                    context.drawImage(img, 0, 0, img.width, img.height);//将图片全部剪切粘在画布上
                    setTimeout(glitchImg, randInt(250, 1000));//随机延时执行glitchImg
                }, 500);
            };

            var clear = function() {
                context.clearRect(0, 0, canvas.width, canvas.height);
            };

            var glitchImg = function() {
                for (var i = 0; i < randInt(1, 13); i++) {
                    var x = Math.random() * w;
                    var y = Math.random() * h;
                    var spliceWidth = w - x;//
                    var spliceHeight = randInt(5, h / 3);
                    context.drawImage(canvas, 0, y, spliceWidth, spliceHeight, x, y, spliceWidth, spliceHeight);
                    //将从（0，y）处剪切的图像附在画布的（x，y）中
                    context.drawImage(canvas, spliceWidth, y, x, spliceHeight, 0, y, x, spliceHeight);
                    //将从（spliceWidth,y）处剪切的图像附在画布（0,y）处。伸缩宽度在（0,w）,伸缩高度在（5，h/3）
                }
            };

            var randInt = function(a, b) {
                return ~~(Math.random() * (b - a) + a);
            };

        </script>

    

</body></html>
![图片描述][1]
阿神
阿神

闭关修行中......

répondre à tous(1)
迷茫
迷茫2017-05-31 10:43:26 1 plancher

Découpez une partie de l'image dessinée par sa propre toile à certains intervalles et redessinez-la dans la toile. . C'est le processus de base. La seule chose à prendre en compte est le contrôle du temps et de la distance de l'animation. . .

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！