Winkelgradient in Leinwand
Ich suche nach einem Code, der es erlaubt, diesen Effekt auf einem Canvas-Strich zu haben. Ich habe bereits einen animierten kreisförmigen Strich, ich brauche nur den ANGLE-Gradienten, nicht linear und nicht radial. Ich habe nur 3 Farben. Das vorhandene ist hier verfügbar (das Bewertungsrating)
Danke an alle:)
3 Antworten
Ich habe diesen Effekt auch vor ein paar Tagen gebraucht und es ist mir gelungen, einen Workaround dafür zu erstellen.
Was ich getan habe, war, einen Gradienten über den anderen zu legen, indem ich etwas wie folgt benutzte:
%Vor%Hier ist der komplette Code und die Demo in JSFiddle:
Ich hoffe, es hilft.
In meinem Fall brauchte ich den ganzen Kreis und nicht nur einen Strich um den Umfang. Mit der obigen Antwort und dem Setzen der Linienbreite auf den doppelten Radius ergaben sich unerwünschte Ergebnisse, also schrieb ich meine eigene.
%Vor%Diese Methode zeichnet Linien vom Mittelpunkt des Kreises zu jedem Pixel entlang der Kante des Kreises. Auf diese Weise erhalten Sie einen saubereren Farbverlauf.
Bei großen Linienstärken ist es immer noch sauberer.
Der größte Nachteil ist die Leistung. Wenn Ihr Radius sehr groß ist, ist die Anzahl der Linien, die benötigt werden, um einen schönen Kreis zu erzeugen, etwa 50 mal so groß wie der Radius.
Tags und Links javascript html5 canvas gradient angle