JavaScript Canvas zeichnet dynamische Drahtgittereffekte

JavaScript Canvas zeichnet dynamische Drahtgittereffekte

In diesem Artikel wird der spezifische Code des dynamischen Drahtgittereffekts von JavaScript Canvas als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Projekt dieser Woche ist die Entwicklung mobiler Seiten, die umfangreiche dynamische Effekte erfordert. Die Haupttechnologie ist Canvas. Beim Zeichnen des dynamischen Drahtmodells haben wir einen Umweg gemacht. Der sogenannte Umweg ist ein logisches Problem, keine technische Implementierungsmethode.

1. Es handelt sich um folgende technische Punkte :

1. Fügen Sie das Canvas-Tag in HTML ein und legen Sie Breite und Höhe fest.

<canvas id="canvas" width=xx height=xx>Ihr Browser unterstützt Canvas nicht, bitte ändern Sie die Version</canvas>

2. Definieren Sie ctx–beginPath–moveTo-lineTo-stroke–closePath in js;

var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle=#f00;
ctx.Linienbreite=1;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(..)..
ctx.stroke();
ctx.closePath();

Das Zeichnen einer statischen Polylinie ist relativ einfach. Sie beginnt am Anfangsknoten von moveTo und bewegt sich direkt zu jedem Knoten. Die Projektanforderung besteht darin, den Animationseffekt der Linie zu zeichnen. Die Implementierungsmethode besteht darin, den Timer zu verwenden, um vom Startpunkt von moveTo aus zwischen jedem geraden Liniensegment mehrmals zu den geordneten Inkrementpunkten auf dem geraden Liniensegment von lineTo zurückzukehren. Der Code lautet wie folgt:

ctx.moveTo(x1,y3);
xm1+=fre1;
ym1+=fre2;
ctx.lineTo(xm1,ym1)

2. Logische Umwege und Lösungen

1. Logischer Umweg

Das Projekt ist ein mobiles Endgerät. In Anbetracht des Anpassungsproblems wird beim Zeichnen von Knoten das Produkt aus Prozent und Breite und Höhe des Bildschirms als Richtig- oder Falsch-Urteil der Änderung von moveTo verwendet. Da das Produkt keine Ganzzahl ist, kann die inkrementelle Änderung von x und y in der if-Anweisung nur ++ verwenden. Da das Inkrement in px-Einheiten erfolgt, ist die Zeichengeschwindigkeit sehr langsam, selbst wenn die Zeit von setInterval in Millisekunden angegeben wird.

var lg01=ctx.createLinearGradient(0,.12*winH,0,.5*winH);
lg01.addColorStop(0,'#6DEAFF');
lg01.addColorStop(.5,'#78C7FF');
lg01.addColorStop(1,'#4A84FF');
var fre=4;
Funktion drawUpBox(){
    ctx.beginPath();
    ctx.strokeStyle=lg01;
    ctx.Linienbreite=0,05*rem;
    wenn(xm1>x2&&ym1==y1){
        ctx.clearRect(x2,y1-0.025*rem,x3-x2,0.05*rem);
        ctx.moveTo(x3,y1);
        xm1-=fre;
        ctx.lineTo(xm1,ym1)
    }sonst wenn(xm1>x1&&ym1<=y2){
        ctx.moveTo(x2,y1);
        xm1-=fre;
        ym1+=fre;
        ctx.lineTo(xm1,ym1)
    }sonst wenn(xm1<=x1&&ym1<y3){
        ctx.clearRect(x1-0,025*rem,y2,0,05*rem,y3-y2)
        ctx.moveTo(x1,y2);
        ym1+=fre;
        ctx.lineTo(xm1,ym1)
    } sonst wenn(ym1<y4){
        ctx.moveTo(x1,y3);
        xm1+=fre;
        ym1+=fre;
        ctx.lineTo(xm1,ym1)
    }sonst wenn(xm1>=x2&&ym1>=y4){

        wenn(xm1<=winW/2){
            ctx.clearRect(x1,y4-0.025*rem,winH/2-x1,0.05*rem);
            ctx.moveTo(x2,y4)
            xm1+=fre;
            ctx.lineTo(xm1,ym1)
        }
    }
    wenn(xm2<x5&&ym2==yd1){
        ctx.clearRect(x4,yd1-0.025*rem,x5-x4,0.05*rem);
        ctx.moveTo(x4,yd1);
        xm2+=fre;
        ctx.lineTo(xm2,ym2);
    }sonst wenn(xm2<x6&&ym1<=yd2){
        ctx.moveTo(x5,yd1);
        xm2+=fre;
        ym2+=fre;
        ctx.lineTo(xm2,ym2)
    }sonst wenn(xm2<=x6&&ym2<yd3){
        ctx.clearRect(x6-0,025*rem,yd2,0,05*rem,yd3-yd2)
        ctx.moveTo(x6,yd2);
        ym2+=fre;
        ctx.lineTo(xm2,ym2)
    }sonst wenn(ym2<yd4){
        ctx.moveTo(x6,yd3);
        xm2-=fre;
        ym2+=fre;
        ctx.lineTo(xm2,ym2)
    }sonst wenn(xm2<=x5&&ym2>=yd4){

        wenn(xm2>=winW/2){
            ctx.clearRect(winW/2,yd4-0.025*rem,x6-winW/2,0.05*rem);
            ctx.VerschiebeNach(x5,yd4)
            xm2-=fre;
            ctx.lineTo(xm2,ym2)
        }anders{
            zeichneOuterAndInnerLine();
            Intervall löschen(timer01)
        }
    }
    ctx.stroke();
    ctx.closePath()
}

Wirkung:

Wenn Sie den Wert des Fre-Inkrements beispielsweise auf 4 ändern, tritt das folgende Problem mit unvollständigen Rändern auf:

2.Lösung:

In der Urteilsanweisung beträgt die horizontale Unterteilung 100 gleiche Teile und die Knoten sind ganzzahlige Werte innerhalb von 100. Die Inkremente werden entsprechend akkumuliert und während moveTo und lineTo in spezifische px umgewandelt. Die Zeicheneffizienz pro Zeiteinheit kann durch die Verwendung von Prozentwerten verbessert werden. Zu diesem Zeitpunkt müssen Sie nur jedes Mal das Inkrement ++ steuern. In Kombination mit dem Timerzyklus ist es einfach, Linienzeichnungen mit unterschiedlichen Frequenzen zu erzielen. Darüber hinaus sind die Knoten in einem Objekt gekapselt und die Knoten können schnell angepasst werden, um dynamische Drahtgitter unterschiedlicher Größe und Art zu zeichnen:

canvas3.width=FensterW;
Leinwand3.Höhe = .15 * WinH;
//$('#canvas3').css('Hintergrund','#eee');
var node3X={x1:20,x2:22,x3:36,x4:64,x5:78,x6:80};
var node3Y={y1:2,yh:20};
var xd=node3X.x2-node3X.x1,xml3=node3X.x3,xmr3=node3X.x4,yml3=ymr3= 0;
//var winWB=winW/100,winHB=winH/100,winCHB=winHB/2;
node3Y.y1Bereit=node3Y.y1*winCHB;
node3Y.y2Ready=node3Y.y1*winCHB+(node3X.x2-node3X.x1)*winWB;
node3Y.y3Bereit=node3Y.y2Bereit+node3Y.yh*winCHB;
node3Y.y4Ready=node3Y.y3Ready+(node3X.x2-node3X.x1)*winWB;
var yml3Ready=node3Y.y1Ready;
var ymr3Ready=node3Y.y1Ready;
var ctx3=canvas3.getContext("2d");
var lg03=ctx3.createLinearGradient(0,0,0,canvas3.height);
lg03.addColorStop(0,'#6DEAFF');
lg03.addColorStop(.5,'#78C7FF');
lg03.addColorStop(1,'#4A84FF');
var mainBoxTimer3=setInterval(drawMainBox3,20);
Funktion drawMainBox3(){
    zeichnePath(ctx3,node3X.x4*winWB,node3Y.y1Bereit,4,winWB,lg03)
    zeichnePath(ctx3,node3X.x3*winWB,node3Y.y1Bereit,4,winWB,lg03)
    ctx3.beginPath();
    ctx3.strokeStyle=lg03;
    ctx3.Linienbreite=.1*rem;
    //Zeichne die linke Hälfte if(xml3>node3X.x2&&yml3==0){
        //ctx3.clearRect(0,0,winW,winH/2);
        xml3--;
        ctx3.moveTo(node3X.x3*winWB,node3Y.y1*winCHB)
        ctx3.lineTo(xml3*winWB,node3Y.y1*winCHB);
    }sonst wenn(xml3>node3X.x1&&yml3Ready<node3Y.y2Ready){
        xml3--;
        yml3Ready=node3Y.y1*winCHB+(node3X.x2-xml3)*winWB;
        ctx3.Verschieben nach(node3X.x2*winWB,node3Y.y1*winCHB)
        ctx3.lineTo(xml3*winWB,yml3Ready)
    }sonst wenn(xml3==node3X.x1&&yml3<node3Y.yh){
        yml3++;
        ctx3.moveTo(node3X.x1*winWB,node3Y.y2Bereit);
        ctx3.lineTo(node3X.x1*winWB,node3Y.y2Ready+yml3*winCHB);
    }sonst wenn(yml3==node3Y.yh&&xml3<node3X.x2){
        xml3++;
        ctx3.moveTo(node3X.x1*winWB,node3Y.y3Bereit);
        ctx3.lineTo(xml3*winWB,node3Y.y3Ready+(xml3-node3X.x1)*winWB)
    }sonst wenn(xml3>=node3X.x2&&xml3<50){
        xml3++;
        ctx3.moveTo(node3X.x2*winWB,node3Y.y4Bereit);
        ctx3.lineTo(xml3*winWB,node3Y.y4Ready);
    }
    //Zeichne die rechte Hälfteif(xmr3<node3X.x5&&ymr3==0){
        xmr3++;
        ctx3.Verschieben nach(node3X.x4*winWB,node3Y.y1*winCHB)
        ctx3.lineTo(xmr3*winWB,node3Y.y1*winCHB);
    }sonst wenn(xmr3<node3X.x6&&ymr3Ready<node3Y.y2Ready){
        xmr3++;
        ymr3Ready=node3Y.y1*winCHB+(xmr3-node3X.x5)*winWB;
        ctx3.Verschieben nach(node3X.x5*winWB,node3Y.y1*winCHB)
        ctx3.lineTo(xmr3*winWB,ymr3Ready)
    }sonst wenn(xmr3==node3X.x6&&ymr3<node3Y.yh){
        ymr3++;
        ctx3.moveTo(node3X.x6*winWB,node3Y.y2Bereit);
        ctx3.lineTo(node3X.x6*winWB,node3Y.y2Ready+ymr3*winCHB);
    }sonst wenn(ymr3==node3Y.yh&&xmr3>node3X.x5){
        xmr3--;
        ctx3.moveTo(node3X.x6*winWB,node3Y.y3Bereit);
        ctx3.lineTo(xmr3*winWB,node3Y.y3Ready+(node3X.x6-xmr3)*winWB)
    }sonst wenn(xmr3<=node3X.x5&&xmr3>50){
        xmr3--;
        ctx3.moveTo(node3X.x5*winWB,node3Y.y4Bereit);
        ctx3.lineTo(xmr3*winWB,node3Y.y4Ready);
    }anders{
        ctx3.clearRect(0,0,canvas3.Breite,canvas3.Höhe);
        ctx3.beginPath();
        ctx3.moveTo(node3X.x3*winWB,node3Y.y1Bereit);
        ctx3.lineTo(node3X.x2*winWB,node3Y.y1Bereit);
        ctx3.lineTo(node3X.x1*winWB,node3Y.y2Bereit);
        ctx3.lineTo(node3X.x1*winWB,node3Y.y3Bereit);
        ctx3.lineTo(node3X.x2*winWB,node3Y.y4Ready);
        ctx3.lineTo(node3X.x5*winWB,node3Y.y4Ready);
        ctx3.lineTo(node3X.x6*winWB,node3Y.y3Ready);
        ctx3.lineTo(node3X.x6*winWB,node3Y.y2Bereit);
        ctx3.lineTo(node3X.x5*winWB,node3Y.y1Bereit);
        ctx3.lineTo(node3X.x4*winWB,node3Y.y1Bereit);
        : Löschintervall (mainBoxTimer3);
    }
    ctx3.stroke();
    ctx3.closePath();

}

Die technische Umsetzung ist die Grundlage, die logische Optimierung die Verbesserung, also die Steigerung von Qualität und Effizienz.

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:
  • JS realisiert den Menüeffekt, wenn die Maus über den Anzeigerand gleitet
  • JavaScript zum automatischen Ändern der Tabellenrahmenfarbe
  • js+css abgerundeter Rand TAB Tab Schiebetür Code teilen (2 Modelle)

<<:  IIS7 IIS8 Reverse-Proxy-Regeln schreiben, installieren und konfigurieren

>>:  Analyse von Mysql-Datenmigrationsmethoden und -Tools

Artikel empfehlen

JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse

Inhaltsverzeichnis 1. Was ist eine doppelt verknü...

Das Problem der Verwendung von Slots durch Vue+tsx wird nicht behoben

Inhaltsverzeichnis Vorwort Finden Sie das Problem...

Anfänger lernen einige HTML-Tags (1)

Anfänger können HTML lernen, indem sie einige HTM...

So ändern Sie Flash-SWF-Dateien in Webseiten

Ich denke, dies ist ein Problem, auf das viele Leu...

Wie verstecke ich einen bestimmten Text in HTML?

Code zum Ausblenden von Text, Ausblenden eines bes...

Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes

Drag & Drop ist eine gängige Funktion im Fron...

Eine kurze Erläuterung zweier Methoden zur Lösung von platzgleichmäßigen Kompatibilitätsproblemen

Seit seiner Einführung im Jahr 2009 wird Flex von...

Anweisungen zur verschachtelten Verwendung von MySQL ifnull

Verschachtelte Verwendung von MySQL ifnull Ich ha...

Beispielcode zum Implementieren eines gleichhohen Layouts auf mehrere Arten mit CSS

Das in diesem Artikel beschriebene Layout gleiche...

js konvertiert ein mehrdimensionales Array in ein eindimensionales Array und ordnet es dann neu

Inhaltsverzeichnis Lassen Sie uns zunächst über d...

Keep-Alive-Multilevel-Routing-Cache-Problem in Vue

Inhaltsverzeichnis 1. Problembeschreibung 2. Ursa...

So verwenden Sie Webpack und Rollup zum Verpacken von Komponentenbibliotheken

Vorwort Ich habe zuvor eine Komponente im Ladesti...

Implementierung eines einfachen Whack-a-Mole-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Implementierung eines CSS-Festlayouts auf beiden Seiten und eines adaptiven Layouts in der Mitte

Analysieren Sie vier gängige Methoden und Prinzip...

So verwenden Sie die Lodop-Drucksteuerung in Vue, um browserkompatibles Drucken zu erreichen

Vorwort Dieses Steuerelement weist beim direkten ...