Créez votre propre avatar de pluie numérique avec canvas et gif.js

Cet article présente principalement l'exemple de code pour créer votre propre avatar de pluie numérique à l'aide de canvas+gif.js. Le code détaillé est compilé ici, ce qui est d'une grande valeur pratique. J'espère qu'il pourra s'y référer. aider tout le monde.

Mode d'emploi

1. Téléchargez un avatar que vous aimez, le dernier est carré

2. . Après génération, vérifiez si la couleur du caractère est trop bizarre. Vous pouvez changer la couleur du caractère

3. Si vous êtes satisfait, faites un clic droit et enregistrez sous

gif.js.

Le protagoniste d'aujourd'hui est gif.js. Gif.js est une bibliothèque qui s'appuie sur H5api pour animer des gifs sur le navigateur. Ici, je vais présenter les pièges, je suppose. Concernant le dessin de la pluie numérique, il y a des articles connexes dans le jardin, donc je ne serai pas aveugle.

gif.js peut facilement obtenir des gif basés sur une animation de canevas :

//代码来自官网

var gif = new GIF({
 workers: 2,//启用两个worker。
 quality: 10//图像质量
});//创建一个GIF实例

// 核心方法，向gif中加一帧图像，参数可以是img/canvas元素，还可以从ctx中复制一帧
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});//一帧时长是200

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {//最后生成一个blob对象
 window.open(URL.createObjectURL(blob));
});

gif.render();//开始启动

Dans l'ensemble, l'API de cette bibliothèque est très simple et conviviale. J'ai déjà vu un jsGif, et c'était déroutant, mais j'ai découvert plus tard une si bonne chose. La génération d'images GIF étant une opération gourmande en ressources CPU, notamment lorsque les images sont volumineuses, la bibliothèque permet le rendu dans un webworker. Il reste cependant quelques points à noter dans le document (en fait j'ai marché sur les pièges) :

1.git.addFrame consiste à ajouter un cadre Pour générer un gif animé, une boucle. est requis :

for(...){
gif.render(...)
}

2. Parmi les options du constructeur GIF, l'option workerScript est requise pour que l'image puisse être rendue dans le worker, comme indiqué ci-dessous. :

var gif = new GIF({
workers: 2,
quality: 10,
  workerScript:'./gif.worker.js'
});

L'avez-vous tous appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Comment télécharger un avatar dans l'applet WeChat

Une manière élégante de générer une adresse d'avatar Gravatar à l'aide de Laravel

Partage d'exemples d'effets de rotation d'avatar en utilisant CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!