How to implement image switching in html5 canvas (code)

The content of this article is about how to implement image switching (code) in html5 canvas. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When I was studying canvas to create dynamic backgrounds in the past few days, I found that this thing can be changed into a picture switching function with a slight modification. It can be used instead of dynamically modifying the src attribute of the img tag to realize the picture timing switching function. Here is the code first:

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

Code explanation:

1. The parameter containerId is the container id that holds canvas, pics is the array of picture src, these two are required, {speed = 1000,width = 100,height = 100,callback = function(pic) {} } This is a bunch of optional fields. You can tell what it does by looking at the name. The order is switching speed, canvas width and height (set here The displayed picture is also the same size, so try to set it according to the pixel size of the picture so that it will not be blurry). The callback function is what will be done if the current picture is clicked. The parameter is the src address of the current picture;

2. There is nothing else to elaborate on. The code is relatively simple. By adding a listening event, it ensures that when the mouse moves in, it stops switching, continues switching when it moves out, and then clicks to activate the callback function;

3. Description Here are the differences between the img tag src switching version: First of all, it will not cause too much redrawing. When img src is switched, the browser will redraw. You can take a look at the F12 record yourself, but using canvas will not cause redrawing. Secondly, the img tag can set the switching style. It is easier to fade in and out. The canvas version is more complicated, and you need to have canvas skills.

The above is the detailed content of How to implement image switching in html5 canvas (code). For more information, please follow other related articles on the PHP Chinese website!