Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 8, effets de particules de traitement d'image-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 8, effets de particules de traitement d'image

黄舟

Jan 17, 2017 pm 04:58 PM

图片处理粒子效果

Partie 8, Effets de particules de traitement d'image

Utilisation d'une syntaxe de type ActionScript pour écrire la série HTML5. À présent, vous devriez être capable de créer quelque chose. Étudions d'abord les différents types d'images. Effets
Pour prévisualiser divers effets, regardez l'image ci-dessous

Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 8, effets de particules de traitement dimage

Regardez ici l'effet et le code. Si vous ne voyez pas l'effet, veuillez télécharger un navigateur. qui prend en charge HTML5

http://fsanguo.comoj.com/html5/jstoas07/index.html

lien de téléchargement du moteur lufylegend.js

http://lufylegend. com/lufylegend

Car après l'encapsulation du moteur, certains ajustements ont été apportés au code précédent et certains attributs ont été supprimés. Voici le même effet de particules que j'ai développé en utilisant la nouvelle version du moteur

100

101

102

103

104

105

106

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>粒子效果</title>  
</head>  
<body>  
<div id="mylegend">loading......</div>  
<script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.6.1.min.js"></script>   
<script type="text/javascript">  
init(40,"mylegend",300,300,main);  
var imgData = [{name:"img",path:"http://lufylegend.com/images/face.jpg"}];  
var imglist;  
var mainBitmap,mainBitmapHeight;  
var windList = [];  
var backLayer;  
function main(){  
    LLoadManage.load(  
        imgData,  
        function(progress){},  
        loadover  
    );  
}  
function loadover(result){  
    imglist = result;  
    //加入一个LSprite对象  
    backLayer = new LSprite();  
    addChild(backLayer);  
    //加入一个LBitmap对象来显示一张大图片，将图片加载到backLayer对象上  
    mainBitmap = new LBitmap(new LBitmapData(imglist["img"]));  
    backLayer.addChild(mainBitmap);  
    //将LBitmap对象初始的高度保存起来  
    mainBitmapHeight = mainBitmap.getHeight();  
    //给LSprite对象加载一个贞事件，即时间轴  
    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
}  
function onframe(){  
    var bitmapdata;  
    var bitmap;  
    var addY,addX;  
   
    if(mainBitmap){  
        //通过LBitmapData对象的setProperties函数，来修改LBitmapData对象显示图片的范围，每运行一次，显示范围在y轴方向上的起始位置向下移动addY个单位  
        addY = 3;  
        mainBitmap.y += addY;  
        if(mainBitmap.y >= mainBitmapHeight){  
            addY += mainBitmapHeight - mainBitmap.y;  
            mainBitmap.y = mainBitmapHeight;  
            //当LBitmapData对象显示图片的范围变为0之后，将其从backLayer上移除  
            backLayer.removeChild(mainBitmap);  
        }else{  
            mainBitmap.bitmapData.setProperties(0,mainBitmap.y,mainBitmap.getWidth(),(mainBitmapHeight - mainBitmap.y));  
        }  
        //下面是将图片一行一行的分解，每运行一次分解一行  
        var arr = [];  
        for(i=0;i<mainBitmap.getWidth();i += 3){  
            addX = 3;  
            if(i+addX > mainBitmap.getWidth()){  
                addX = mainBitmap.getWidth() - i;  
            }  
            //通过设定LBitmapData对象的显示范围，来得到分解后的小图片，并且将分解后的小图片压入到arr数组  
            bitmapdata = new LBitmapData(imglist["img"],i,mainBitmap.y-addY,addX,addY);  
            bitmap = new LBitmap(bitmapdata);  
            bitmap.x = i;  
            bitmap.y = mainBitmap.y-addY;  
            backLayer.addChild(bitmap);  
            arr.push(bitmap);  
        }  
        if(mainBitmap.y >= mainBitmapHeight)mainBitmap=null;  
        //将分解后的一行小图片压入windList数组  
        windList.push(arr);  
    }  
    windrun();  
}  
function windrun(){  
    var i,j,flag,ml=1;  
    //循环windList数组中的每一张小图片，随机向左上右等方向进行移动  
    for(i=0;i<windList.length;i++){  
        if(windList[i].length == 0){  
            windList.splice(i,1);  
            i--;  
            continue;  
        }  
        for(j=0;j<windList[i].length;j++){  
            if(windList[i][j].i == null)windList[i][j].i=1;  
            flag = Math.random();  
            if(flag < 0.3){  
                windList[i][j].x += ml*windList[i][j].i;  
            }else if(flag < 0.6){  
                windList[i][j].x -= ml*windList[i][j].i;  
            }else{  
                windList[i][j].y -= ml*windList[i][j].i;  
            }  
            windList[i][j].alpha -= 0.05;  
            windList[i][j].i += 2;  
            if(windList[i][j].alpha <= 0 || windList[i][j].x > LGlobal.width || windList[i][j].y > LGlobal.height){  
                backLayer.removeChild(windList[i][j]);  
                windList[i].splice(j,1);  
                j--;  
            }  
        }  
    }  
}  
</script>   
</body>  
</html>

Copier après la connexion

Test de la connexion

http://lufylegend.com/demo/astojs/8.html

Ce qui précède consiste à utiliser une syntaxe de type ActionScript pour écrire du HTML5 - Partie 8, le contenu des effets de particules de traitement d'image, veuillez faire attention au contenu plus connexe du site Web chinois PHP (www.php.cn) !

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7322

Tutoriel Java

1625

Tutoriel CakePHP

1350

Tutoriel Laravel

1262

Tutoriel PHP

1209

Afficher plus

Related knowledge

Utilisation d'Imgscalr pour le traitement d'images dans le développement d'API Java Jun 18, 2023 am 08:40 AM

Utilisation d'Imgscalr pour le traitement d'images dans le développement d'API Java Avec le développement de l'Internet mobile et la popularité de la publicité sur Internet, les images sont devenues un élément indispensable dans de nombreuses applications. Qu'il s'agisse d'afficher des produits, de créer des cercles sociaux ou d'améliorer l'expérience utilisateur, les images jouent un rôle important. Dans les applications, il est souvent nécessaire d'effectuer des opérations telles que le recadrage, la mise à l'échelle et la rotation des images, ce qui nécessite l'utilisation de certains outils de traitement d'image. Imgscalr est une image très couramment utilisée dans le développement d'API Java.

Comment ajouter du bruit aux images en utilisant Python Aug 19, 2023 am 11:21 AM

Comment utiliser Python pour ajouter du bruit aux images Introduction : Avec le développement de la technologie, le traitement d'image numérique est devenu une méthode de traitement d'image courante. Parmi eux, l'ajout de bruit à l'image est une étape importante du traitement de l'image. En ajoutant du bruit, le réalisme et la complexité de l'image peuvent être améliorés. Cet article expliquera comment utiliser Python pour ajouter du bruit aux images et fournira des exemples de code pertinents. 1. Comprendre le bruit de l'image Le bruit de l'image fait référence à des perturbations aléatoires qui affectent la qualité et la clarté de l'image. Les bruits d'image courants incluent le bruit gaussien,

Traitement d'image Golang : comment effectuer un mappage de dégradés de couleurs et d'échelles de gris d'images Aug 19, 2023 am 08:53 AM

Traitement d'images Golang : Comment effectuer un mappage de dégradés de couleurs et d'échelles de gris d'images Introduction : Avec le développement des médias numériques, le traitement d'images est devenu un élément indispensable de notre vie quotidienne. Dans le langage Go, nous pouvons utiliser certaines bibliothèques pour le traitement d'images, comme github.com/disintegration/imaging. Cet article explique comment utiliser cette bibliothèque pour effectuer un mappage de dégradés de couleurs et d'échelles de gris d'images. 1. Présentation de la bibliothèque Tout d'abord, nous devons introduire github.com/ dans le projet Go

Comment utiliser Golang pour améliorer les bordures et les bords des images Aug 18, 2023 pm 09:46 PM

Présentation de la façon d'utiliser Golang pour améliorer les bordures et les bords des images : Dans le domaine du traitement d'images, l'amélioration des bordures et des bords est une technologie couramment utilisée qui peut améliorer efficacement les effets visuels des images et améliorer la précision de la reconnaissance d'images. Cet article expliquera comment utiliser le langage Golang pour effectuer des opérations d'amélioration des bordures et des bords sur des images et fournira des exemples de code correspondants. Remarque : Cet article suppose que vous avez installé et configuré l'environnement de développement Golang dans votre environnement local. Importer des packages de dépendances Tout d’abord, nous devons importer les packages de dépendances suivants pour les opérations de traitement d’image

Comment utiliser Golang pour masquer et masquer les effets sur les images Aug 27, 2023 am 09:07 AM

Comment utiliser Golang pour masquer et masquer les effets sur les images Dans le traitement d'images moderne, le masquage et les effets de masquage sont des effets spéciaux très courants. Cet article expliquera comment utiliser Golang pour masquer et masquer les effets sur les images. Installation des bibliothèques nécessaires Avant de commencer, nous devons installer certaines bibliothèques nécessaires au traitement des images. Exécutez la commande suivante pour installer les bibliothèques nécessaires : goget-ugithub.com/fogleman/gggoget-ugolang.org/x/im

Comment gérer la mise en cache et le préchargement des images dans Vue ? Aug 25, 2023 pm 04:21 PM

Comment gérer la mise en cache et le préchargement des images dans Vue ? Lors du développement de projets Vue, nous devons souvent gérer la mise en cache et le préchargement des images pour améliorer les performances du site Web et l'expérience utilisateur. Cet article présentera quelques méthodes de gestion de la mise en cache et du préchargement des images dans Vue, et donnera des exemples de code correspondants. 1. La mise en cache des images utilise le chargement différé des images (LazyLoading) Le chargement différé des images est une technologie qui retarde le chargement des images, c'est-à-dire que l'image n'est pas chargée jusqu'à ce que la page défile jusqu'à l'emplacement de l'image. Cela réduit les demandes de ressources d'image lors du premier chargement de la page

Comment flouter une image en utilisant PHP Aug 18, 2023 pm 02:13 PM

Comment utiliser PHP pour flouter des images Le flou d'image est une opération courante dans le traitement d'image, qui peut ajouter un effet de flou à l'image pour lui donner un aspect plus doux et artistique. En PHP, nous pouvons utiliser la bibliothèque GD pour flouter les images. Ce qui suit explique comment utiliser PHP pour flouter les images et joint des exemples de code correspondants. Installation de la bibliothèque GD Avant de commencer, vous devez vous assurer que la bibliothèque GD est installée sur votre serveur. Vous pouvez le faire en ajoutant la fonction phpinfo() à votre fichier PHP

Conseils de développement Laravel : Comment optimiser le traitement des images et la mise en cache Nov 22, 2023 am 09:17 AM

Suggestions de développement Laravel : Comment optimiser le traitement des images et la mise en cache Introduction Dans le développement Web moderne, le traitement des images et la mise en cache sont un problème courant et important. L'optimisation des stratégies de traitement des images et de mise en cache améliore non seulement les performances du site Web et l'expérience utilisateur, mais réduit également la consommation de bande passante et la charge du serveur. Cet article explorera les méthodes et suggestions sur la façon d'optimiser le traitement des images et la mise en cache dans le développement Laravel. 1. Choisissez le format d'image approprié Le choix du format d'image approprié est la première étape de l'optimisation du traitement de l'image. Les formats d'image courants incluent JPEG, PNG

See all articles