HTML5 charge des images sous forme d'animation _html5 tutoriel compétences-Tutoriel H5-php.cn

HTML5 charge des images sous forme d'animation _html5 tutoriel compétences

WBOY

Libérer： 2016-05-16 15:51:48

original

1881 Les gens l'ont consulté

L'exemple utilise la balise HTML5 canvas et le script Javascript pour écrire simplement l'effet de l'image de chargement. Veuillez utiliser un navigateur prenant en charge HTML5 pour prévisualiser l'effet :
L'image ci-dessous montre l'effet d'une grille progressivement horizontale
.

partie html :

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html lang="fr" >
<tête>
<méta charset="UTF- 8">
<titre>html5 chargement de l'image titre>
tête>
<corps>
<bouton onclique="drawImg1( )">De gauche à droitebouton>
<bouton onclique="drawImg2( )">Du centre vers les côtés gauche et droitbouton>
<bouton onclique="drawImg3( " > <hr/>
<toile classe
"toile" id="toile" largeur="600" hauteur="300">toile> corps>
html>
Partie JavaScript : Code XML/HTML

//Initialisation
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
image = nouveau Image();
image.src = "img/test.jpg"
drawWidth = 0,
intervalle = setInterval(function(){
);
> canvas.width) clearInterval(intervalle); },100);
}
//Ouvrez la méthode de chargement du centre vers les côtés gauche et droit
fonction drawImg2(){
var
= 0,
= canvas.width/2,
= setInterval(function(){ context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height
drawWidth = 20;
drawLeft
= 10 if(drawLeft
0) clearInterval(intervalle); },100);
drawWidth
0, spaceWidth
canvas.width/20, //10 fait référence au nombre de blocs divisés intervalle
setInterval(function(){ pour(var i
0;i<20;i ){ context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height );
> spaceWidth) clearInterval(intervalle);
},100);
}

Le contenu ci-dessus est introduit par l'éditeur pour charger des images sous forme d'animation en HTML5. J'espère qu'il sera utile à tout le monde !