Comment Canvas implémente la dynamique github404
Cette fois, je vais vous montrer comment implémenter la dynamique github404 avec Canvas. Quelles sont les précautions pour utiliser Canvas pour implémenter la dynamique github404. Ce qui suit est un cas pratique, jetons un coup d'œil.
Il y a quelques jours, j'ai utilisé le style css et js pour rendre hommage à l'interface similaire de github404. En même temps, je suis récemment entré en contact avec canvas Avec l'idée de déconner. a utilisé l'algorithme js précédent pour le compléter en utilisant les effets dynamiques de github404.
Ressources du fichier
Le code source du fichier et l'image sont donnés à la fin de l'article
code
corps partie de la page Web
Ici, définissez la largeur et la hauteur du canevas et définissez-le comme élément au niveau du bloc. Ces balises img chargent ces images, nous n'avons donc pas besoin de les charger dans js, puis de définir les images pour qu'elles ne soient pas affichées display:none.
<body>
<canvas id="mycanvas" width="1680" height="630"
style="margin:0;display:block">
您的浏览器不支持canvas
</canvas>
<img src="./images/field.png" style="display:none">
<img src="./images/text.png" style="display:none">
<img src="./images/cat.png" style="display:none">
<img src="./images/cat_shadow.png" style="display:none">
<img src="./images/speeder.png" style="display:none">
<img src="./images/speeder_shadow.png" style="display:none">
<img src="./images/buliding_1.png" style="display:none">
<img src="./images/building_2.png" style="display:none">
</body>partie js
1. Ici, j'ai toujours créé un nouvel objet json nommé github404 pour encapsuler tous les paramètres et méthodes
2. Créez l'objet imgData. à nouveau et transmettez tous les paramètres requis pour img dans ps:top et left pour le positionnement dans la méthode drawImage(). Le paramètre scale est utilisé pour calculer le mouvement de l'image correspondant lorsque la souris bouge
3. ) est utilisée pour l'initialisation et constitue l'interface avec l'extérieur
4. L'implémentation de la méthode de dessin consiste à utiliser la boucle for in pour parcourir imgData[], puis à attribuer des valeurs dans l'ordre, et enfin. utilisez la méthode drawImage() pour dessiner, mais dans la méthode de dessin mobile, vous devez d'abord faire attention à l'utilisation de la méthode ctx.clearRect() pour effacer le canevas.
<script>
var github404 = {
imgData: {//将所有图片的信息用json对象记录
bg: {
top: 0,
left: 110,//top和left用于定位，在画图时使用
src: './images/field.png',//对应图片路径
scale: 0.06,//鼠标移动时，该图片所对应移动的比例
},
building_2: {
top: 133,
left: 1182,
src: './images/building_2.png',
scale: 0.05,
},
building_1: {
top: 79,
left: 884,
src: './images/buliding_1.png',
scale: 0.03,
},
speeder_shadow: {
top: 261,
left: 776,
src: './images/speeder_shadow.png',
scale: 0.01,
},
cat_shadow: {
top: 288,
left: 667,
src: './images/cat_shadow.png',
scale: 0.02,
},
speeder: {
top: 146,
left: 777,
src: './images/speeder.png',
scale: 0.01,
},
cat: {
top: 88,
left: 656,
src: './images/cat.png',
scale: 0.05,
},
text: {
top: 70,
left: 364,
src: './images/text.png',
scale: 0.03,
},
},
rate_w: 0,
rate_h: 0,//偏移的比例
field_width: 1680,
field_height: 370,//背景高度和宽度
canvas: document.querySelector('#mycanvas'),//获得canvas元素
init: function() {//初始化加载方法
this.setRateWH();
this.placeImg();
this.attachMouseEvent();
},
setRateWH: function() {//计算偏移比的方法
var window_width = document.body.clientWidth;
var window_height = document.body.clientHeight;
this.rate_w = this.field_width/window_width;
this.rate_h = this.field_height/window_height;
},
placeImg: function() {//初始化的绘图方法
let ctx = this.canvas.getContext('2d');//获得画笔
for(key in this.imgData){//遍历imageData 对象
var image = new Image();
var left = this.imgData[key].left;
var top = this.imgData[key].top;
image.src = this.imgData[key].src;
ctx.drawImage(image,left,top,
image.width,image.height);
}
},
attachMouseEvent: function() {
var that = this;
document.body.onmousemove = function(e){
that.picMove(e.pageX,e.pageY);
}
},
picMove: function(pageX,pageY) {//鼠标移动时重新画图的方法
let ctx = this.canvas.getContext('2d');
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
for(key in this.imgData) {
var image = new Image();
var offer_w = this.rate_w * pageX * this.imgData[key].scale;
var offer_h = this.rate_h * pageY * this.imgData[key].scale;
//定义 left和top,下面画图时给参数定位
var left = this.field_width/100 - offer_w + this.imgData[key].left;
var top = this.field_height/100 - offer_h + this.imgData[key].top;
image.src = this.imgData[key].src;
ctx.drawImage(image,left,top,
image.width,image.height);
}
}
}
window.onload = function() {
//只调用github404的init方法 封装了数据
github404.init();
}
</script>Résumé
Cette fois, j'ai utilisé du canevas pour compléter cet effet dynamique, ce qui m'a fait mieux comprendre l'utilisation du canevas. En même temps, cela m'a permis
de mieux comprendre comment utiliser les objets json pour encapsuler des données et des méthodes, et comment organiser le code.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment la liste déroulante HTML5 devrait améliorer l'expérience utilisateur
Comment utiliser WebGL de H5 pour créer des graphiques json et echarts dans la même interface
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!
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.
Article chaud
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)
Convertir le disque fixe VirtualBox en disque dynamique et vice versa
Mar 25, 2024 am 09:36 AM
Lors de la création d'une machine virtuelle, il vous sera demandé de sélectionner un type de disque, vous pouvez sélectionner un disque fixe ou un disque dynamique. Et si vous choisissez des disques fixes et réalisez plus tard que vous avez besoin de disques dynamiques, ou vice versa, vous pouvez convertir l'un en l'autre ? Dans cet article, nous verrons comment convertir un disque fixe VirtualBox en disque dynamique et vice versa. Un disque dynamique est un disque dur virtuel qui a initialement une petite taille et qui augmente à mesure que vous stockez des données dans la machine virtuelle. Les disques dynamiques sont très efficaces pour économiser de l'espace de stockage, car ils n'occupent que l'espace de stockage de l'hôte nécessaire. Cependant, à mesure que la capacité du disque augmente, les performances de votre ordinateur peuvent être légèrement affectées. Les disques fixes et les disques dynamiques sont couramment utilisés dans les machines virtuelles
Comment convertir un disque dynamique en disque de base sous Windows 11
Sep 23, 2023 pm 11:33 PM
Si vous souhaitez convertir un disque dynamique en disque de base sous Windows 11, vous devez d'abord créer une sauvegarde car le processus effacera toutes les données qu'il contient. Pourquoi devriez-vous convertir un disque dynamique en disque de base sous Windows 11 ? Selon Microsoft, les disques dynamiques sont obsolètes depuis Windows et leur utilisation n'est plus recommandée. De plus, Windows Home Edition ne prend pas en charge les disques dynamiques, vous ne pourrez donc pas accéder à ces lecteurs logiques. Si vous souhaitez combiner plus de disques dans un volume plus grand, il est recommandé d'utiliser des disques de base ou des espaces de stockage. Dans cet article, nous allons vous montrer comment convertir un disque dynamique en disque de base sous Windows 11. Comment convertir un disque dynamique en disque de base sous Windows 11 ? au début
Comment créer un carrousel d'images dynamique en utilisant HTML, CSS et jQuery
Oct 25, 2023 am 10:09 AM
Comment utiliser HTML, CSS et jQuery pour créer un carrousel d'images dynamiques Dans la conception et le développement de sites Web, le carrousel d'images est une fonction fréquemment utilisée pour afficher plusieurs images ou bannières publicitaires. Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons obtenir un effet carrousel d'images dynamique, ajoutant de la vitalité et de l'attrait au site Web. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un carrousel d'images dynamique simple et fournit des exemples de code spécifiques. Étape 1 : Configurer la jonction HTML
Quelles versions de html2canvas existe-t-il ?
Aug 22, 2023 pm 05:58 PM
Les versions de html2canvas incluent html2canvas v0.x, html2canvas v1.x, etc. Introduction détaillée : 1. html2canvas v0.x, qui est une première version de html2canvas. La dernière version stable est la v0.5.0-alpha1. Il s'agit d'une version mature qui a été largement utilisée et vérifiée dans de nombreux projets ; 2. html2canvas v1.x, il s'agit d'une nouvelle version de html2canvas.
uniapp implémente comment utiliser Canvas pour dessiner des graphiques et des effets d'animation
Oct 18, 2023 am 10:42 AM
Comment utiliser Canvas pour dessiner des graphiques et des effets d'animation dans Uniapp nécessite des exemples de code spécifiques 1. Introduction Avec la popularité des appareils mobiles, de plus en plus d'applications doivent afficher divers graphiques et effets d'animation sur le terminal mobile. En tant que framework de développement multiplateforme basé sur Vue.js, uniapp offre la possibilité d'utiliser un canevas pour dessiner des graphiques et des effets d'animation. Cet article présentera comment Uniapp utilise Canvas pour obtenir des effets de graphique et d'animation, et donnera des exemples de code spécifiques. 2. toile
Apprenez le cadre de canevas et expliquez en détail le cadre de canevas couramment utilisé
Jan 17, 2024 am 11:03 AM
Explorez le framework Canvas : Pour comprendre quels sont les frameworks Canvas couramment utilisés, des exemples de code spécifiques sont nécessaires. Introduction : Canvas est une API de dessin fournie en HTML5, grâce à laquelle nous pouvons obtenir des graphiques et des effets d'animation riches. Afin d'améliorer l'efficacité et la commodité du dessin, de nombreux développeurs ont développé différents frameworks Canvas. Cet article présentera certains frameworks Canvas couramment utilisés et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment utiliser ces frameworks. 1.Cadre EaselJSEa
Analyser les balises SQL dynamiques dans MyBatis : sélectionner la balise
Feb 24, 2024 pm 12:15 PM
Dynamic SQL est l'une des fonctions très importantes du framework MyBatis. Il peut fusionner et traiter dynamiquement des instructions SQL selon différentes conditions pour réaliser des opérations SQL flexibles. Parmi eux, la balise de sélection est une balise clé en SQL dynamique, qui est principalement utilisée pour implémenter la logique de sélection conditionnelle. Cet article explorera l'utilisation des balises de sélection dans MyBatis et fournira des exemples de code spécifiques à des fins de démonstration. 1. Syntaxe de base des balises de sélection Il existe deux formes principales de balises de sélection dans MyBatis :
Comment dessiner des cartes géographiques dynamiques et interactives avec Python
Sep 28, 2023 pm 09:37 PM
Comment dessiner des cartes géographiques dynamiques et interactives avec Python Introduction : Dans la visualisation de données, les cartes géographiques sont un outil courant et puissant qui peut nous aider à mieux comprendre les modèles de distribution spatiale et les tendances des ensembles de données. En tant que langage de programmation à usage général, Python possède de puissantes capacités de traitement et de visualisation des données et peut également être utilisé pour dessiner des cartes géographiques dynamiques et interactives. Cet article expliquera comment utiliser Python pour dessiner des cartes géographiques dynamiques et interactives et fournira des exemples de code spécifiques. 1. Préparation à l'utilisation de Python
