HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。

これを 3 つのステップで実装します。

HTML構造を定義する
画像を分割
アニメーション関数の記述

HTML構造を定義する

ここで必要なのはキャンバス要素だけです。

<html>
  <本文>
    <キャンバス
      id="myCanvas"
      幅="900"
      高さ="600"
      スタイル="背景色: 黒;"
    </キャンバス>
  </本文>
</html>

画像を分割

この例では、10 行 10 列のグリッドに従って画像を 100 個の小さなフラグメントに分割し、各小さなフラグメントを個別にレンダリングできるようにします。

image = new Image();
イメージをアップロードする
boxWidth、boxHeightを設定します。
// 10行10列に分割する let rows = 10,
  列数 = 20,
  カウンター = 0;

image.onload = 関数（）{
  // 各行と列の幅と高さを計算します。boxWidth = image.width / columns;
  boxHeight = image.height / 行数;
  // ループレンダリング requestAnimationFrame(animate);
};

requestAnimationFrame: アニメーションを実行することをブラウザに伝え、次の再描画の前に指定されたコールバック関数を呼び出してアニメーションを更新するようにブラウザに要求します。

アニメーション関数の記述

次に、再描画の前にブラウザが小さなフラグメントをランダムにレンダリングできるようにするアニメーション関数を記述します。

ここでの核となるのは context.drawImage メソッドです。

キャンバスを document.getElementById("myCanvas"); にします。
コンテキストを canvas.getContext("2d");

関数アニメーション() {
  // モジュールをランダムにレンダリングします。let x = Math.floor(Math.random() * columns);
  y = Math.floor(Math.random() * 行) とします。
  // コア context.drawImage(
    画像、
    x * boxWidth, // キャンバスの水平座標の開始位置 y * boxHeight, // キャンバスの垂直座標の開始位置 boxWidth, // 描画の幅（小さなフラグメント画像の幅）
    boxHeight, // 描画の高さ（小さなフラグメント画像の高さ）
    x * boxWidth, // 大きな画像の x 座標位置から描画を開始します。 y * boxHeight, // 大きな画像の y 座標位置から描画を開始します。 boxWidth, // 大きな画像の x 位置 (小さなフラグメント画像の幅) から描画を開始します。
    boxHeight // 大きな画像の y 位置から始めて、描画する高さ (小さなフラグメント画像の高さ)
  );
  カウンター++;
  // モジュールが 90% レンダリングされている場合は、画像全体を表示します。
  if (カウンター > 列 * 行 * 0.9) {
    context.drawImage(画像, 0, 0);
  } それ以外 {
    アニメーションフレームをリクエストします(アニメーション化)。
  }
}

完全なコード

<html>
  <本文>
    <キャンバス
      id="myCanvas"
      幅="900"
      高さ= "600"
      スタイル="背景色: 黒;"
    </キャンバス>
    <スクリプト>
      image = new Image();
      画像.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
      キャンバスを document.getElementById("myCanvas"); にします。
      コンテキストを canvas.getContext("2d");
      boxWidth、boxHeightを設定します。
      行数を10とします。
        列数 = 20,
        カウンター = 0;

      image.onload = 関数（）{
        boxWidth = image.width / 列数;
        boxHeight = image.height / 行数;
        アニメーションフレームをリクエストします(アニメーション化)。
      };

      関数アニメーション() {
        x = Math.floor(Math.random() * columns); とします。
        y = Math.floor(Math.random() * 行) とします。
        コンテキスト.drawImage()
          画像、
          x * boxWidth, // 水平座標の開始位置 y * boxHeight, // 垂直座標の開始位置 boxWidth, // 画像の幅 boxHeight, // 画像の高さ x * boxWidth, // キャンバス上の画像の x 座標位置を配置します y * boxHeight, // キャンバス上の画像の y 座標位置を配置します boxWidth, // 使用する画像の幅 boxHeight // 使用する画像の高さ);
        カウンター++;
        if (カウンター > 列 * 行 * 0.9) {
          context.drawImage(画像, 0, 0);
        } それ以外 {
          アニメーションフレームをリクエストします(アニメーション化します);
        }
      }
    </スクリプト>
  </本文>
</html>

要約する

このデモでは、canvasAPI を使用して画像のフラグメント読み込み効果を実現します。とても簡単ですよね?

これで、HTML コードに基づく画像断片化読み込み機能の実装に関するこの記事は終了です。より関連性の高い HTML 画像断片化読み込みコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: Vueのキーボードイベントの詳細な説明

>>: フロントエンド制作に関する簡単な議論: 互換性のために IE6 はまだ必要ですか?