HTML5 lädt Bilder in Form von Animationen. _HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

HTML5 lädt Bilder in Form von Animationen. _HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:51:48

Original

1868 Leute haben es durchsucht

Das Beispiel verwendet das HTML5-Canvas-Tag und das Javascript-Skript, um einfach den Ladebildeffekt zu schreiben. Bitte verwenden Sie einen Browser, der HTML5 unterstützt, um eine Vorschau des Effekts anzuzeigen:
Das Bild unten zeigt den Effekt eines allmählich horizontalen Rasters

HTML-Teil:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html lang="en" >
<Kopf>
<meta charset="UTF- 8">
<Titel>HTML5-Ladebild Titel>
Kopf>
<Körper>
<button onclick="drawImg1( )">Von links nach rechtsSchaltfläche>
<button onclick="drawImg2( )">Von der Mitte zur linken und rechten SeiteSchaltfläche>
<button onclick="drawImg3( " > <Std./>
<canvas class
"canvas" id="canvas" width="600" Höhe="300">Leinwand> Körper>
html>
JavaScript-Teil: XML/HTML-Code

//Initialisierung
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
image = new Image(
image.src = "img/test.jpg";
drawWidth = 0,
interval = setInterval(function(){
drawWidth = 20;
if(drawWidth
canvas.width) clearInterval(interval); },100);
}
//Öffnen Sie die Lademethode von der Mitte nach links und rechts
Funktion drawImg2(){
var
= 0,
= Leinwand.width/2,
= setInterval(function(){ context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);
-
10; if(drawLeft <
) clearInterval(interval); },100); }
//Schrittweise horizontale Gitterlademethode
Funktion drawImg3(){
var
=
, spaceWidth =
.width/20, // 10 bezieht sich auf die Anzahl der geteilten Blöcke interval =
(function(){ for(var i =
;i<20;i ){ context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height); }
drawWidth = 5;
if(drawWidth
spaceWidth) clearInterval(interval);
}

Der oben genannte Inhalt wird vom Editor zum Laden von Bildern in Form von Animationen in HTML5 eingeführt. Ich hoffe, dass er für alle hilfreich ist!