简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie erzeugt js drawImage Bildrisse und -flackern? Wie wird die Logik des folgenden Codes implementiert?
阿神
阿神 2017-05-31 10:41:26
0
1
1028

Sie können den Link direkt öffnen, um die Wirkung zu sehen: http://evilzone.org/. Unten ist der 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]
阿神
阿神

闭关修行中......

Antworte allen(1)
迷茫
迷茫2017-05-31 10:43:26 1 Etage

每隔一定的时间将自身canvas绘制的图截取一部分，并重新绘制到canvas中。。这就是基本流程，唯一需要考虑的是动画时间和距离的把握。。。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！