アニメーション化されたファビコンの作成

この記事では、JavaScript、HTMLを使用してアニメーション化されたファビコンを作成する方法を示しています<canvas></canvas>、そして少しジオメトリ。 Webサイトタブの横に表示されている小さなアイコンは、動的に更新されて、読み込みの進行状況を示すことができます。これは、写真をアップロードするなど、バックグラウンドで長いタスクを実行するときに特に役立ちます。

重要なのは、を活用することです<canvas></canvas>アニメーションを描画し、レンダリングされた画像でファビコンを更新する要素。この記事は、段階的なガイドを提供します。

1。HTMLセットアップ： aを追加します<canvas></canvas>要素と隠された<link>HTMLへのファビコンの要素。<canvas></canvas>要素はアニメーションを描画するために使用され、<link>要素が更新され、アニメーションがFaviconとして表示されます。どちらもサイズの32x32ピクセルで、標準のファビコンサイズです。デモンストレーションのために、アニメーションをトリガーするためにボタンが追加されます。

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

2。JavaScriptアニメーション： JavaScriptコードは、最初にCanvasサポートをチェックします。ボタンクリックイベントハンドラーは、 setIntervalを使用してアニメーションを開始し、60ms間隔でdrawLoader関数を呼び出します。

 onload =（）=> {
  canvas = document.queryselector（ 'canvas'）、
  context = canvas.getContext（ '2d'）;
  if（!! context）{
      //サポートされています
  }
};

button = document.queryselector（ 'button'）;
button.addeventlistener（ 'click'、function（）{
    n = 0;
    loadinginterval = setInterval（drawloader、60）;
}）;

3。スタイリングと描画：アニメーションの線に対して線形勾配が定義されています。 drawLoader関数はキャンバスをクリアし、正方形の一部を描き、4つの25インターバルフェーズで描画されたラインを徐々に増やします。各間隔の後、CanvasコンテンツはPNGに変換され、Faviconとして設定されます。

 gradient = context.createLineargradient（0、0、32、32）とします。
Gradient.AddColorStop（0、 '＃c7f0fe'）;
Gradient.AddColorStop（1、 '＃56D3C9'）;
Context.Strokestyle = Gradient;
Context.LineWidth = 8;

関数drawloader（）{
  （コンテキスト）{
    ClearRect（0、0、32、32）;
    beginpath（）;
    // ...（描画ロジック - 完全なコードについては元の記事を参照）...
  }
  // ...（favicon更新ロジック - 完全なコードについては元の記事を参照）...
}

完全な図面ロジックでは、シンプルなジオメトリを使用して、アニメーションの各フェーズの行のエンドポイントを計算します。この記事では、数式と対応するコードを提供します。最後のステップでは、キャンバスコンテンツをデータURLに変換し、のhref属性を更新することです。<link>ファビコンとしてアニメーションを表示する要素。

完全なコードはGitHub（元の記事で提供されているリンク）で利用できます。この手法は、さまざまなアニメーション効果のためにさまざまな形状と塗りつぶしスタイルを使用するように適合させることができます。

以上がアニメーション化されたファビコンの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。