HTML5 vous apprend à faire un commutateur d'image des fragments fraîches (toile)

Anciennes règles, appliquez d'abord le code source. La zone d'image peut être cliquée et l'animation commencera à partir de la position de clic.

J'ai fait cet effet il y a trois ans, mais cela a été fait avec d'innombrables étiquettes div. Récemment, je veux apprendre un grand dieu avec un CSS pur pour apprendre un effet CSS.

1. Tout d'abord, préparez un certain nombre de photos de la même taille. CSS). Afin de faciliter l'utilisation, ajoutez ces images à un élément caché dans HTML pour une utilisation ultérieure.

 <div class = 'hide'> <img class = 'img' src = './images/a.jpg' /> <img class = 'img' src = './images/b.jpg' /> <img class = 'img' src = './images/c.jpg' /> <img class = 'img' src = './images/d.jpg' /> <img class = 'img' src = './ images / e.jpg '/> </div>

 .Hide {affichage: aucun;}

2. Insérez une toile en toile en HTML, et elle est déterminée par la taille, mais il doit être assuré qu'il est cohérent avec la largeur et la hauteur des ressources d'image. La taille de la toile dans cet exemple est de 800 * 450.

 <Canvas ID = MyCanvas Width = 800 Height = 450> Votre navigateur ne prend pas en charge Canvas </ Canvas>

3. Le code de base est le suivant, obtenez d'abord l'objet de contexte de la toile;

 var ctx = document.QuerySelector ('#myCanvas'). accident vasculaire cérébral ();

Je crois que beaucoup de gens peuvent comprendre rapidement après l'avoir regardé.

Ensuite, avant d'expliquer le code source, passons en revue l'utilisation de la fonction DrawImage dans Canvas. Étant donné que nous devons utiliser les 9 paramètres de cette fonction, il existe de nombreux paramètres et nous devons garder à l'esprit l'objet de signification et de référence de ces paramètres.

 Context.Drawimage (IMG, SX, SY, SWIDTHT, SHEIGHT, X, Y, Largeur, hauteur, hauteur);

· IMG: l'image, la toile ou la vidéo qui spécifie à utiliser

· SX: la position de coordonnées x de la coupe

· Sy: la position des coordonnées y de la coupe de la coupe

· Swidth: Largeur de l'image de l'image coupée

· Sheight: la hauteur de l'image a été coupée

· X: Placez la position des coordonnées x de l'image sur la toile

Y: Placez la position des coordonnées y de l'image sur la toile

· Largeur: la largeur de l'image que vous souhaitez utiliser

· Hauteur: la hauteur de l'image que vous souhaitez utiliser

Je crois que même si les paramètres ci-dessus sont répertoriés, il est toujours facile de s'évanouir lors du développement. Voici des conseils pour tout le monde: en plus du premier paramètre IMG, il y a 8 paramètres, dont la référence de taille des 4 premiers paramètres est la carte d'origine, c'est-à-dire 1920 * 1080;

N'oubliez pas cette formule, il n'est pas facile de s'évanouir lorsqu'il est réel.

La division consiste à régler la taille d'une unité dans la toile. . Le nombre de conventions n'est pas nécessairement le nombre maximum ou le minimum de la division, car l'effet excessif n'est pas éblouissant et la petite performance sera sous pression.

Prenant la taille du 800 * 450 dans cet exemple, je choisis 25 * 25 comme taille de l'unité ici, c'est-à-dire que la toile entière se compose de 32 * 18 au total de 576 cellules. Après avoir divisé la grille, nous devons calculer certains paramètres de base.

 Var imgw = 1920, // images de la largeur d'origine / hauteur IMGH = 1080; I I I I I I I I I I I I I I I I I I I I I I I I I = CONH / DH, // UNIT / COLUMN NUMBRE J = CONW / DW; = imgh / i;

Les trois premiers ensembles de paramètres sont définis par nous auparavant行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. Si cela est inversé, il sera forcé plus tard. Le dernier ensemble de DW / DH est une taille de cellule qui élargit et se convertit à l'image d'origine, qui est utilisée pour les images d'adaptation ultérieures.

Dans l'ordre, nous dessinons d'abord la cellule dans le coin supérieur gauche. Parce que son原图裁切位置et画布摆放位置(0, 0), le plus facile.

 CTX.DrawImage (IMG, 0, 0, DH, DH, 0, 0, DH);

Réussi. Alors, comment écrire la deuxième ligne maintenant, comment écrire l'image dans la troisième colonne?

 var i = 2, j = 3;

Ce qui est facile à confondre ici, c'est que裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.

Pour plus de commodité, une fonction pure responsable du rendu est encapsulée.

 Fonction mandeledraw (img, i, j) {ctx.DrawImage (img, dw * j, dh * i, dh, dw * j, dh * i, dh);}

Une fois la méthode de rendu encapsulée, l'image entière est rendue à travers les doubles cycles des lignes et des colonnes.

 ctx.beginpath (); ();

Parfait ~. En fait, la partie fondamentale de cette étape est terminée. Parce qu'à ce moment, cette image est déjà combinée avec des centaines de cellules, et tout le monde peut lui donner un effet d'animation avec l'imagination de la tianme.

Avant de partager votre algorithme d'animation, permettez-moi de vous montrer quelle est la mauvaise orthographe ~

C'est un peu cool ~

Partageons mon algorithme d'animation. Comment l'effet dans la démo est-il réalisé?

Étant donné que chaque cellule a classé le nombre (i, j) sur la grille de la toile. J'espère qu'après une coordonnée (i, j), nous pourrons obtenir tous les points autour des coordonnées de près de loin. L'image spécifique ci-dessous, trop paresseuse pour faire une image ~

Par exemple, les coordonnées sont (3, 3)

Il y a 4 points avec une distance de 1 (2, 3), (3, 4), (4, 3), (3, 2) au total;

Il y a des points avec une distance de 2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1), (2), (2) 2) Il y en a 8 au total;

..........

Il est également facile de trouver l'algorithme de cette série de points, car行号差值的绝对值+ 列号差值的绝对值= 距离, le spécifique:

 Fonction countaround (i, j, dst) {var resarr = []; )); ;}}} Return resarr;}

Cette fonction est utilisée pour donner une coordonnée et une distance (DST) données et trouver tous les points sur la distance autour des coordonnées pour revenir sous la forme d'un tableau. Cependant, l'algorithme ci-dessus a moins de limitations de frontières, comme suit:

 countaround (i, j, dst) {var resarr = []; ; = (i i -1) && n <= (j-1))) {resarr.push ({x: m, y: n});}}} return resarr;}

De cette façon, nous avons une fonction pure qui calcule tous les points sur la distance fixe environnante, puis commence à terminer le rendu de l'animation.

Écrivez d'abord une fonction de compensation pour nettoyer le contenu de la cellule.

 handleClear (i, j) {ctx.clearrect (dw * j, dh * i, dw, dh);}

Un autreIMG est l'image suivante, et dessine enfin une nouvelle image à la couche externe via SetInterval pour compléter l'effet de gradient fragmenté.

 Var dst = 0, interalbj = setInterval (function () {var resarr = countaround (i, j, dst); resarr.ForEach (insertm, index) {handleClear (item.x, item. Y); mandeledraw (an autretime. x, item.y);});

Lorsque la longueur du tableau renvoyé par le Countaround est de 0, c'est-à-dire que tous les points au point de coordonnées sont en dehors de la limite et que le cycle de la minuterie est arrêté. À ce stade, tout le code de base a été introduit.

À l'heure actuelle, toutes les coordonnées sur une toile donnée peuvent répandre l'effet de commutation d'image fragmentée de ce point à l'environnement.

Lors de la rotation automatique, commencez l'animation à partir des 8 points prédéfinis (quatre coins et le point médian de quatre côtés).

 var randompoint = [{x: 0, y: 0}, {x: i -1, y: 0}, {x: 0, y: j -1}, {x: i -1, y: j - 1 }, {x: 0, y: math.ceil (j / 2)}, {x: i -1, y: math.ceil (j / 2)}, {x: math.ceil (i / 2), y: 0}, {x: math.ceil (i / 2), y: j -1}]

En cliquant, les clics sont calculés, en commençant l'animation à partir du point.

 Fonction handleclick (e) {var offsetx = e.offsetx, officey = e.offsety, j = math.floor (offsetx / dw), i = math.floor (offsey / dh), // avec i, j, commencer à commencer Pour commencer.

À l'heure actuelle, cet effet est uniquement en phase de démo.

Ce qui précède est tout le contenu de cet article.