Das Erstellen eines animierten Favicon

Dieser Artikel zeigt, wie ein animiertes Favicon mit JavaScript, HTML, erstellt wird<canvas></canvas> und ein bisschen Geometrie. Das Favicon, das das kleine Symbol neben einer Registerkarte Website angezeigt wird, kann dynamisch aktualisiert werden, um den Ladefortschritt anzuzeigen. Dies ist besonders nützlich, wenn lange Aufgaben im Hintergrund ausgeführt werden, z. B. das Hochladen von Fotos.

Der Schlüssel ist, die zu nutzen<canvas></canvas> Element, um die Animation zu zeichnen und dann das Favicon mit dem gerenderten Bild zu aktualisieren. Der Artikel enthält eine Schritt-für-Schritt-Anleitung:

1. HTML -Setup: A hinzufügen a<canvas></canvas> Element und ein versteckt<link> Element für das Favicon zu Ihrem HTML. Der<canvas></canvas> Element wird verwendet, um die Animation zu zeichnen, und die<link> Das Element wird aktualisiert, um die Animation als Favicon anzuzeigen. Beide sind 32x32 Pixel, die Standard -Favicon -Größe. Zu Demonstrationszwecken wird eine Taste hinzugefügt, um die Animation auszulösen.

<link href="" rel="icon" type="image/png" width="32px">
<canvas height="32" hidden="" width="32"></canvas>
<button>Laden</button>

2. JavaScript -Animation: Der JavaScript -Code prüft erstmals die Unterstützung von Canvas. Eine Schaltfläche Klicken Sie auf Ereignishandler initiieren die Animation mithilfe von setInterval , um die drawLoader -Funktion in 60 ms -Intervallen aufzurufen.

 onload = () => {
  canvas = document.querySelector ('canvas'),
  context = canvas.getContext ('2d');
  if (!! Kontext) {
      // Leinwand unterstützt
  }
};

taste = document.querySelector ('button');
Button.AdDeVentListener ('klicken', function () {
    n = 0;
    loadingInterval = setInterval (Drawloader, 60);
});

3. Styling und Zeichnen: Ein linearer Gradient wird für die Zeilen der Animation definiert. Die drawLoader -Funktion löscht die Leinwand und zeichnet dann einen Teil eines quadratischen Quadrats und erhöht die gezogenen Linien schrittweise über vier 25-Interval-Phasen. Nach jedem Intervall wird der Canvas -Inhalt in ein PNG umgewandelt und als Favicon festgelegt.

 lass gradient = context.createlineargradient (0, 0, 32, 32);
gradient.addcolorstop (0, '#c7f0fe');
gradient.addcolorstop (1, '#56d3c9');
context.strokestyle = gradienten;
context.lineWidth = 8;

Funktion Drawloader () {
  mit (Kontext) {
    ClearRect (0, 0, 32, 32);
    beginPath ();
    // ... (Zeichnungslogik - siehe Originalartikel für vollständigen Code) ...
  }
  // ... (Favicon -Update -Logik - siehe Originalartikel für vollständigen Code) ...
}

Die vollständige Zeichnungslogik verwendet eine einfache Geometrie, um die Linienendpunkte für jede Phase der Animation zu berechnen. Der Artikel enthält die mathematischen Formeln und den entsprechenden Code. Der letzte Schritt besteht darin, den Canvas -Inhalt in eine Daten -URL zu konvertieren und das href<link> Element, um die Animation als Favicon anzuzeigen.

Der vollständige Code ist auf GitHub verfügbar (Links im Originalartikel). Die Technik kann angepasst werden, um verschiedene Formen und Füllstile für unterschiedliche Animationseffekte zu verwenden.

Das obige ist der detaillierte Inhalt vonDas Erstellen eines animierten Favicon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!