So implementieren Sie den Bildwechsel im HTML5-Canvas (Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Bildwechsel (Code) in der HTML5-Leinwand. Ich hoffe, dass er für Freunde hilfreich ist.

Als ich heutzutage nach Canvas recherchierte, um dynamische Hintergründe zu erstellen, stellte ich fest, dass dieses Ding mit einer kleinen Änderung in eine Bildwechselfunktion umgewandelt werden kann. Es kann die dynamische Änderung des src-Attributs des img-Tags ersetzen um die Bild-Timing-Umschaltfunktion zu erreichen. Hier ist zuerst der 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);
 })
}

Codeerklärung:

1 Der Parameter „containerId“ ist die Container-ID, die die Leinwand enthält, „pics“ ist das Array der Bildquelle, diese beiden sind erforderlich, {speed = 1000,width = 100,height = 100,callback = function(pic) {} } Dies ist eine Reihe optionaler Felder. Sie können erkennen, was es tut, indem Sie sich den Namen ansehen. Die Reihenfolge ist Wechselgeschwindigkeit, Leinwandbreite und -höhe (. Hier einstellen Das angezeigte Bild hat auch die gleiche Größe. Versuchen Sie daher, es entsprechend der Pixelgröße des Bildes einzustellen, damit es nicht verwischt. Die Rückruffunktion wird ausgeführt, wenn auf das aktuelle Bild geklickt wird Quelladresse des aktuellen Bildes;

2. Es gibt nichts weiter zu erläutern. Durch das Hinzufügen eines Abhörereignisses wird sichergestellt, dass die Maus nicht weiterschaltet Wenn es herausgezogen wird, klicken Sie, um die Rückruffunktion zu aktivieren.

3. Hier sind die Unterschiede zwischen der img-Tag-Src-Umschaltversion: Erstens wird es nicht zu viel Neuzeichnen geben Wenn der Browser umgeschaltet wird, können Sie sich den F12-Datensatz selbst ansehen, aber die Verwendung von Canvas führt nicht zum Neuzeichnen. Zweitens kann der Umschaltstil einfacher eingestellt werden ist komplizierter und Sie benötigen Canvas-Kenntnisse.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Bildwechsel im HTML5-Canvas (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!