html5キャンバスで画像切り替えを実装する方法（コード）

この記事の内容は、HTML5 キャンバスでの画像切り替え (コード) の実装方法に関するものです。必要な方は参考にしていただければ幸いです。

ここ数日、動的な背景を作成するために Canvas を勉強していたときに、これを少し変更するだけで、src 属性の動的な変更を画像切り替え機能に変更できることがわかりました。 imgタグの設定により、映像タイミング切り替え機能を実現します。まずはコードです:

function switchPic(containerId, pics, {
 speed = 1000,
 width = 100,
 height = 100,
 callback = function(pic) {}
} = {}) {
//判断
 if (!containerId || !pics) 
 throw new Error ("TypeError: switchPic--> 
  containerId or pics is undefined!");
 if(typeof containerId !== "string" || 
    {}.toString.call(pics) !== "[object Array]" )
 throw new Error ("TypeError: switchPic--> 
  containerId is not string or pics is not array!");
 //制作canvas
 let canvas = document.createElement("canvas");
 canvas.width = width;
 canvas.height = height;
 canvas.style.cursor = "pointer";
 //放入canvas
 document.querySelector("#" + containerId).appendChild(canvas);
 ctx = canvas.getContext("2d");
 let img = new Image(),
     timer = null,
     i = 1,
     change = function() {
       img.src = pics[i - 1];
       img.onload = function() {
         ctx.clearRect(0, 0, width, width);
//动态背景图这里可能需要修改，如果帧图都在一张图片中，这就需要裁剪显示，再多几个参数了
         ctx.drawImage(img, 0, 0, width, width);
         i++;
         if(i > pics.length) i = 1;
/*这里动态背景图是动画效果，所以用requestAnimationFrame比计时器更好；
  而且切换图片显示需要速度控制，所以计时器适用；
*/
         timer = setTimeout(change, speed);
        }
      };
 timer = setTimeout(change, speed);
 canvas.addEventListener("mouseenter", function() {
   canvas.title = img.src;
   clearTimeout(timer);
 })
 canvas.addEventListener("mouseleave", function() {
   timer = setTimeout(change, speed);
 })
 canvas.addEventListener("click", function(event) {
   callback.call(this, img.src);
 })
}

コードの説明:

1. パラメータcontainerIdはcanvasを保持するコンテナID、picsは画像srcの配列、これら2つは必須です。 = 1000,width = 100,height = 100,callback = function(pic) {} } これは、名前を見れば何を行うかがわかります。順番は、切り替え速度、キャンバスの幅、高さです。 (ここで設定します。表示される画像も同じサイズなので、ぼやけないように画像のピクセルサイズに合わせて設定してください。) コールバック関数は、現在の画像をクリックした場合に行われる処理です。パラメータは現在のピクチャの src アドレスです。

2. コードは比較的単純で、マウスが移動するとスイッチが停止します。 、移動時に切り替えを継続し、クリックしてコールバック関数をアクティブにします。

3. 説明 img タグの src 切り替えバージョンの違いは次のとおりです。 まず、再描画があまり発生しません。 img src が切り替わると、ブラウザは F12 レコードを確認することもできますが、canvas を使用すると再描画が発生しません。次に、img タグを使用すると、フェードインとフェードアウトが簡単に設定できます。キャンバス バージョンはより複雑であり、キャンバスのスキルが必要です。

以上がhtml5キャンバスで画像切り替えを実装する方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。