JS+canvas betreibt GIF-Animationen

Dieses Mal bringe ich Ihnen JS+Canvas zum Betreiben von GIF-Animationen. Was sind die Vorsichtsmaßnahmen zum Betreiben von GIF-Animationen mit JS+Canvas? Im Folgenden sind praktische Fälle aufgeführt. 1 Steh auf und schau es dir an.

HTML5-Canvas kann Bildinformationen lesen und das aktuelle Bild zeichnen. Daher können viele Bildspezialeffekte erzielt werden, wie z. B. Bildmosaik, Unschärfe, Farbwertfilterung usw. Wir müssen hier nicht so kompliziert sein, wir müssen nur unser Bild lesen und es neu zeichnen.

HTML-Code:

<imgid="testImg"src="xxx.gif"width="224"height="126">
<p><inputtype="button"id="testBtn"value="停止"></p>

JS-Code:

if('getContext'indocument.createElement('canvas')) {
 HTMLImageElement.prototype.play =function() {
  if(this.storeCanvas) {
   // 移除存储的canvas
   this.storeCanvas.parentElement.removeChild(this.storeCanvas);
   this.storeCanvas =null;
   // 透明度还原
   image.style.opacity ='';
  }
  if(this.storeUrl) {
   this.src =this.storeUrl;
  }
 };
 HTMLImageElement.prototype.stop =function() {
  varcanvas = document.createElement('canvas');
  // 尺寸
  varwidth =this.width, height =this.height;
  if(width && height) {
   // 存储之前的地址
   if(!this.storeUrl) {
    this.storeUrl =this.src;
   }
   // canvas大小
   canvas.width = width;
   canvas.height = height;
   // 绘制图片帧（第一帧）
   canvas.getContext('2d').drawImage(this, 0, 0, width, height);
   // 重置当前图片
   try{
    this.src = canvas.toDataURL("image/gif");
   }catch(e) {
    // 跨域
    this.removeAttribute('src');
    // 载入canvas元素
    canvas.style.position ='absolute';
    // 前面插入图片
    this.parentElement.insertBefore(canvas,this);
    // 隐藏原图
    this.style.opacity ='0';
    // 存储canvas
    this.storeCanvas = canvas;
   }
  }
 };
}
  
varimage = document.getElementById("testImg"),
 button = document.getElementById("testBtn");
  
if(image && button) {
 button.onclick =function() {
  if(this.value =='停止') {
   image.stop();
   this.value ='播放';
  }else{
   image.play();
   this.value ='停止';
  }
 };
}

Der obige Code wurde nicht im Detail getestet und mögliche Erfahrungsprobleme (IE-Flackern) wurden nicht speziell behandelt (das Auswirkungsprinzip wird gezeigt). Wenn Sie ihn tatsächlich verwenden möchten, müssen Sie ihn selbst optimieren.

Nachteile:

1. IE9+-Unterstützung. IE7/IE8 unterstützt kein Canvas.

2. Sie können nur das GIF stoppen, nicht die echte Pause. Da es sich bei den von Canvas erhaltenen GIF-Bildinformationen um die Informationen des ersten Frames handelt, scheint es, dass die nachfolgenden nicht abgerufen werden können. Um eine Pause statt eines Stopps zu erreichen, ist weitere Forschung erforderlich. Wenn Sie eine Methode haben, können Sie diese gerne mit uns teilen.                                        

Ich glaube, dass Sie die Methode zum Lesen dieses Artikels beherrschen. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

HTML-Tags mit DOM-Knoten kombinieren

js verbietet Browser-Back-Events

Das obige ist der detaillierte Inhalt vonJS+canvas betreibt GIF-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!