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

Erklärung der MySQL-Indextypen Normal, Unique und Full Text

Zu den Indextypen von MySQL gehören Normalindex, ...

Installationsprozess des mysql5.6.8-Quellcodes

Kernel: [root@opop ~]# cat /etc/centos-release Ce...

Beispiel für die Implementierung einer Ankerpositionierungsfunktion beim WeChat-Applet

Vorwort Bei der Entwicklung kleiner Programme müs...

Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL

Inhaltsverzeichnis Vorwort 1. Hintergrund 2. Simu...

So verwenden Sie Linux-Befehle in IDEA

Im Vergleich zum Windows-System bietet das Linux-...

Grundlegende Verwendung von Unterabfragen in MySQL

Inhaltsverzeichnis 1. Unterabfragedefinition 2. U...

JavaScript realisiert die Generierung und Überprüfung von Zufallscodes

Die Generierung und Überprüfung von Zufallscodes ...

So lösen Sie das Problem FileZilla_Server:425. Datenverbindung kann nicht geöffnet werden

Bei der Installation von FileZilla Server auf dem...

SQL Left Join und Right Join - Prinzip und Beispielanalyse

Es gibt zwei Tabellen, und die Datensätze in Tabe...

Ein kurzer Vortrag über Responsive Design

1. Was ist Responsive Design? Responsive Design b...

JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen

1. Warum diesen Artikel schreiben? Sie haben sich...

JS implementiert einen einfachen Zähler

Verwenden Sie HTML, CSS und JavaScript, um einen ...

MySQL: MySQL-Funktionen

1. Integrierte Funktionen 1. Mathematische Funkti...

Detaillierte Darstellung des MySQL 5.7.33-Installationsprozesses

Inhaltsverzeichnis Download des Installationspake...

Was Sie beim Gestalten von Webseiten für Mobilgeräte mit kleinem Bildschirm beachten sollten

Der Grund dafür ist, dass dieser Webseitentyp auf ...