Comment implémenter le changement d'image dans le canevas HTML5 (code)

Le contenu de cet article explique comment implémenter le changement d'image (code) dans le canevas html5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lorsque je faisais des recherches sur Canvas pour créer des arrière-plans dynamiques ces jours-ci, j'ai découvert que cette chose pouvait être transformée en fonction de changement d'image avec une légère modification. Elle peut remplacer la modification dynamique de l'attribut src de la balise img. pour réaliser la fonction de commutation de synchronisation d'image. Voici d'abord le code :

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);
 })
}

Explication du code :

1. Le paramètre containersId est l'identifiant du conteneur qui contient le canevas, pics est le tableau de l'image src, ces deux-là sont obligatoires, { speed = 1000, width = 100, height = 100, callback = function(pic) {} } Il s'agit d'un tas de champs facultatifs. Regardez simplement le nom et vous saurez ce qu'il fait. L'ordre change de vitesse, le canevas. largeur et hauteur (ici l'image affichée est définie pour avoir la même taille, essayez donc de la définir en fonction de la taille en pixels de l'image afin qu'elle ne soit pas floue. La fonction de rappel est ce qui sera fait si l'image actuelle). est cliqué. Le paramètre est l'adresse src de l'image actuelle ;

2. Il n'y a rien d'autre à préciser. En ajoutant un événement d'écoute, cela garantit que lorsque la souris entre. , il arrête de basculer, continue de basculer lorsqu'il s'éloigne, puis clique pour activer la fonction de rappel

3 Expliquez la différence entre la version de commutation img tag src : tout d'abord, cela ne causera pas trop de choses ; redessiner. Lorsque img src est commuté, le navigateur sera redessiné. Vous pouvez jeter un œil à l'enregistrement F12 vous-même, mais l'utilisation de canvas ne le provoquera pas. Deuxièmement, la balise img peut définir le style de changement. entrée et sortie. La version canevas est plus compliquée et vous devez avoir des compétences en canevas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!