Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis

In diesem Artikelbeispiel erfahren Sie den spezifischen Code zur Implementierung eines supercoolen Wasserlichteffekts auf Leinwandbasis zu Ihrer Information. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>  
<html>  
<Kopf>  
    <meta charset="UTF-8">  
    <title>Super cooler Wasserlichteffekt basierend auf Leinwand</title>  
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Leinwand{
            Rand: 1px durchgehend rot;
            Breite: 100 %;
            Höhe: 100%;
        }
    </Stil>
</Kopf>  
<body onselectstart="return false">  
        <!-- Fügen Sie das Canvas-Tag hinzu und fügen Sie einen roten Rand hinzu, damit es auf der Seite leichter zu erkennen ist-->  
        <canvas id="meineCanvas" >  
        Ihr Browser unterstützt das Canvas-Tag nicht.   
        </Leinwand>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<Skripttyp="text/javascript">
    var canvas = document.getElementById("meineCanvas");  
    var ctx = canvas.getContext("2d");    
    var cx1 = Leinwand.offsetLeft;
    var cy1 = canvas.offsetTop;
    var cx2 = Leinwand.OffsetLinks + Leinwand.OffsetBreite;
    var cy2 = canvas.offsetTop + canvas.offsetHeight;
    var bbox = canvas.getBoundingClientRect();  
    $(Funktion(){
        var Richtung = „rechts“, x = y = Rechtsanzahl = Abwärtsanzahl = Linksanzahl = Aufwärtsanzahl = 0;
        ctx.beginPath(); //Starte einen neuen Zeichenpfad ctx.moveTo(x, y); //Definiere die Startpunktkoordinaten der Linie als (0,0)
        setzeIntervall(Funktion(){
            ctx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            Schalter(Richtung){
                Fall 'richtig':
                    wenn(x >= 300 - right_count){
                        Richtung = „nach unten“;    
                        rechts_zählen++;
                    }anders{
                        x++;
                    }
                    brechen;
                Fall 'down':
                    wenn(y >= 150 - down_count){
                        Richtung = "links";
                        herunterzählen++;
                    }anders{
                        y++;
                    }
                    brechen;
                Fall 'links':
                    wenn(x <= linke_Anzahl){
                        Richtung = „nach oben“;
                        Anzahl_links++;
                    }anders{
                        X--;
                    }
                    brechen;
                Fall 'oben':
                    wenn(y <= up_count + 1){
                        Richtung = "rechts";
                        hochzählen++;
                    }anders{
                        j--;
                    }
                    brechen;
            }
            ctx.lineTo(x, y);
            ctx.lineCap = "rund";
            ctx.lineWidth = 1; //Breite des Liniensegments festlegen ctx.stroke(); //Eine gerade Linie entlang des Pfads der Koordinatenpunktfolge zeichnen }, 1);
    }) 
</Skript>  
</body>  
</html>

Screenshots der Effekte:

Die Lauflichter sind immer an und drehen hier überwiegend ihre Kreise.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: