Können Sie sich bitte eine Demo ansehen und mir mitteilen, wie ich mehrere Kreise auf einer Leinwand zeichnen kann? mit unterschiedlicher Koordinate ohne sich zu wiederholen, Bündel von Codes?
Wie Sie auf Demo und folgendem Code sehen können
%Vor% Ich habe versucht, sie unter ctx zu haben, aber es ist nicht korrekt, also habe ich versucht, for-Schleife zu verwenden, um 50 Punkte zu erstellen, aber ich habe Probleme beim Wiederholen und Hinzufügen von Code wie ctx.fill (); für alle.
Können Sie mir bitte sagen, wie ich das beheben kann?
Danke
Dies liegt daran, dass Sie den Pfad nicht schließen, indem Sie entweder fill() oder closePath() den Pfad schließen, sodass nicht alle Elemente verbunden werden. fill() füllt die Kreise aus und schließt den Pfad, so dass wir ihn einfach verwenden können. Außerdem müssen Sie beginPath() verwenden, damit sie voneinander getrennt sind. Hier sind Ihre drei Kreise:
Um einen Haufen Code nicht zu wiederholen und einzigartige Koordinaten zu haben, speichern Sie Ihre X und Y Position in einem Array und verwenden Sie eine for Schleife, um sie zu durchlaufen.
Das ständige Erstellen und Schließen neuer Wege ist kein guter Rat.
Sie sollten alle Füllungen / Konturen des gleichen Stils zusammenfassen und sie in einem einzigen Zeichnungsaufruf ausführen. Der Leistungsunterschied zwischen diesen Ansätzen wird sehr schnell mit zunehmender Polygonzahl sichtbar.
Der Weg dahin ist, den Stift zu bewegen und den Pfadaufbau für jeden Kreis aufzurufen; streichen Sie das Ende in einem Schuss. Allerdings ist hier eine Eigenart beteiligt. Wenn Sie den Punkt in die Mitte verschoben haben und den Kreis zeichnen, sehen Sie immer noch eine horizontale Radiuslinie , die vom Mittelpunkt des Kreises zum Umfang gezeichnet wird.
Um dieses Artefakt zu vermeiden, bewegen wir uns nicht zum Zentrum, sondern zum Umfang. Dies überspringt die Radiuszeichnung. Im Wesentlichen sind alle diese Befehle zum Verfolgen eines Pfades und es gibt keine Möglichkeit, eine Diskontinuität zu beschreiben, ohne closePath ; normalerweise moveTo tut es, aber HTML5 canvas API tut es nicht. Dies ist eine einfache Abhilfe, um dem entgegenzuwirken.
Es lohnt sich auch, Transformationen zu verwenden und alles relativ zu einem lokalen Bezugssystem zu zeichnen.
%Vor%Sie können problemlos mehrere Kreise mit einer for-Schleife erstellen. Sie müssen nur einen Bogen zeichnen und jedes Mal ausfüllen. Mit Ihrem Beispiel könnten Sie so etwas machen.
%Vor%Beispiel Fiddle von vielen Kreisen an verschiedenen Orten in einer Schleife.
%Vor%Tags und Links javascript jquery html5 html5-canvas