recherche
Maisoninterface WebTutoriel H5Exemple d'utilisation de HTML5 pour dessiner des graphiques 3D composés de points, de lignes et de surfaces_html5 compétences du didacticiel

Je joue avec Canvas depuis deux ou trois semaines, et jouer avec des objets plats, c'est pareil, alors j'ai commencé à jouer avec la 3D.

Parce que le canevas Canvas est toujours plat après tout, donc si vous voulez avoir de la 3D, vous devez faire abstraction d'un axe Z. Convertissez ensuite les coordonnées 3D en coordonnées 2D, dessinez-les sur le canevas, puis utilisez la rotation et d'autres effets de transformation pour créer une sensation 3D. Faire de la 3D implique généralement de passer des points aux lignes, puis des lignes aux surfaces.

【Pointer】

Si vous cliquez dessus, j'ai déjà écrit un article de blog sur la 3D L'analyse du nuage de tags 3D est en fait très simple Bien que cet article de blog parle du nuage de tags 3D implémenté à l'aide de div, mais la cause profonde is Le principe de la 3D est le même, c'est la 3D la plus simple composée de points. Chaque étiquette est un point. Vous pouvez également regarder cette DEMO directement :
2015512164236104.png (344×329)

3DBall
Il contient un total de cinq cents objets ponctuels. Chaque objet ponctuel change de taille et de transparence en fonction de son axe Z, puis le répartit uniformément sur la sphère qu'il forme. une sphère ponctuelle.

【Ligne】

Une fois que vous saurez comment faire des points, la ligne sera facile, il suffit de relier les points. Je n'ai pas fait de DÉMO à ce sujet, mais ce n'est vraiment pas difficile. Bouclez simplement moveTo, puis lineTo, et la ligne sortira.

【Nouilles】

Ce billet de blog parle principalement du visage.
Sans plus tard, faisons d'abord une DÉMO :
2015512164305697.png (170×168)

Cube 3D

Pour créer un cube, j'ai utilisé trois objets : un objet point, un objet zone et le cube lui-même :

Ce qui suit est un objet ponctuel. x, y, z sont les coordonnées tridimensionnelles du point. La méthode _get2d convertit les coordonnées tridimensionnelles en niveau bidimensionnel. fallLength est la distance focale.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. var Vecteur = fonction(x,y,z){
  2. this.x = x;
  3. this.y = y
  4. this.z = z;
  5. this._get2d
  6. = fonction(){ var
  7. scale
  8. = fallLength/(fallLength this.z ) var
  9. x
  10. = centerX this.x*scale var
  11. y
  12. = centerY this.y*scale retourner {x:x, y:y}
  13.                                                                 
  14.                                                                                

  15. Ensuite le public cible :

    La page de propriétés de l'objet face est facile à comprendre. Une face est un carré, v1v2v3v4 sont les quatre sommets de la face. L'attribut zIndex est très important. Il représente le niveau de la face, qu'elle soit sur le visage. à l'extérieur ou à l'intérieur. Cela doit être Oui, afin que lorsque vous dessinez avec une toile, cette surface puisse être dessinée à l'avant et ne soit pas recouverte par d'autres surfaces. La valeur de zIndex est également facile à comprendre. Il s'agit de la coordonnée moyenne sur l'axe z du sommet, qui est en fait la coordonnée sur l'axe z du point central. La couleur est la couleur de cette surface.

    Code XML/HTMLCopier le contenu dans le presse-papiers
    1. var Visage = fonction(vecteur1,vecteur2,vecteur3,vecteur4,couleur){   
    2.             this.v1 = vecteur1;   
    3.             this.v2 = vecteur2;   
    4.             this.v3 = vecteur3;   
    5.             this.v4 = vecteur4;   
    6.             this.color = couleur;   
    7.             this.zIndex = (this.v1.z   this.v2.z   this.v3.z   this.v4.z)/4;   
    8.             this.draw = fonction(){   
    9.                 ctx.save();   
    10.                 ctx.beginPath();   
    11.                 ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);   
    12.                 ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);   
    13.                 ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);   
    14.                 ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);   
    15.                 ctx.closePath();   
    16.                 // ctx.fillStyle = "rgba(" parseInt(Math.random()*255) "," parseInt(Math.random()*255) "," parseInt(Math.random()*255) ",0.2)";   
    17.                 ctx.fillStyle = this.color;   
    18.                 ctx.fill();   
    19.              }   
    20.         }  


      最后是立方体本身对象:

      因为立方体最后要旋转,所以,立方体对象里面不仅有面对象,还要有点对象,点旋转后La longueur est définie par _initVector et _draw就是根据面里的zIndex排序),排序好后,调用每个面里的draw方法。立方体就出来了。

    Code XML/HTML复制内容到剪贴板
    1. var Cube = fonction(longueur){   
    2.             this.length = longueur ;   
    3.             this.faces = [];   
    4.             this.vectors = [];   
    5.         }   
    6.         Cube.prototype = {   
    7.             _initVector:function(){   
    8.                 this.vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);   
    9.                 this.vectors[1] = new Vector(-this.length/2 , this.length/2 , this.length/2);    
    10.                 this.vectors[2] = new Vector(this.length/2 , -this.length/2 , this.length/2);    
    11.                 this.vectors[3] = new Vector(this.length/2 , this.length/2 , this.length/2);    
    12.                 this.vectors[4] = new Vector(this.length/2 , -this.length/2 , -this.length/2);   
    13.                 this.vectors[5] = new Vector(this.length/2 , this.length/2 , -this.length/2);   
    14.                 this.vectors[6] = new Vector(-this.length/2 , -this.length/2 , -this.length/2);   
    15.                 this.vectors[7] = new Vector(-this.length/2 , this.length/2 , -this.length/2);   
    16.              },   
    17.             _draw:function(){   
    18.                 this.faces[0] = new Face(this.vectors[0] , this.vectors[1] , this.vectors[3] , this.vectors[2] , "#6c6");   
    19.                 this.faces[1] = new Face(this.vectors[2] , this.vectors[3] , this.vectors[5] , this.vectors[4] , "#6cc");   
    20.                 this.faces[2] = new Face(this.vectors[4] , this.vectors[5] , this.vectors[7] , this.vectors[6] , "#cc6");   
    21.                 this.faces[3] = new Face(this.vectors[6] , this.vectors[7] , this.vectors[1] , this.vectors[0] , "#c6c");   
    22.                 this.faces[4] = new Face(this.vectors[1] , this.vectors[3] , this.vectors[5] , this.vectors[7] , "#666");   
    23.                 this.faces[5] = new Face(this.vectors[0] , this.vectors[2] , this.vectors[4] , this.vectors[6] , "#ccc");   
    24.   
    25.                 this.faces.sort(function(a , b){   
    26.                      return b.zIndex - a.zIndex ;   
    27.                 });   
    28.                 this.faces.foreach(function(){   
    29.                     this.draw();   
    30.                 })   
    31.              }   
    32.         }  


      立方体做好了,接下来就可以让它动起来了。根据鼠标位置改变立方体转动的角度。 rotateX et rotateY sont des références pour X. Description du produit3D变换。绕X轴和绕Y轴是最简单的旋转矩阵了。当然,如果有兴趣的还可以去搜一下绕任意轴旋转矩阵。。。这个有点复杂,我本来想用它来做个魔方,不过Il s'agit d'un système rotatif. Rotation Y来了。

    Code XML/HTML复制内容到剪贴板
    1. if("addEventListener" in window){   
    2.             window.addEventListener("mousemove" , function(event){   
    3.                 var x = événement.clientX - canvas.offsetLeft - centerX;   
    4.                 var y = événement.clientY - canvas.offsetTop - centerY;   
    5.                 angleY = x*0,0001 ;   
    6.                 angleX = y*0,0001 ;   
    7.              });   
    8.         }   
    9.         autre {   
    10.             window.attachEvent("onmousemove" , function(event){   
    11.                 var x = événement.clientX - canvas.offsetLeft - centerX;   
    12.                 var y = event.clientY - canvas.offsetTop - centerY;   
    13.                 angleY = x*0,0001 ;   
    14.                 angleX = y*0,0001 ;   
    15.              });   
    16.         }  
    17.            
    18.   
    19.         fonction rotateX(vecteurs){   
    20.             var cos = Math.cos(angleX);   
    21.             var sin = Math.sin(angleX);   
    22.             vectors.foreach(function(){   
    23.                 var y1 = ce.y * cos - this.z * sin;   
    24.                 var z1 = ce.z * cos   this.y * sin ;   
    25.                 this.y = y1;   
    26.                 this.z = z1;   
    27.              });   
    28.         }   
    29.   
    30.         fonction rotationY (vecteurs){   
    31.             var cos = Math.cos(angleY);   
    32.             var sin = Math.sin(angleY);   
    33.             vectors.foreach(function(){   
    34.                 var x1 = ce.x * cos - this.z * sin ;   
    35.                 var z1 = ce.z * cos   ce.x * sin;   
    36.                 this.x = x1;   
    37.                 this.z = z1;   
    38.             })   
    39.         }  
    40.   
    41.            
    42.   
    43.         cube = nouveau Cube(80);   
    44.         cube._initVector();   
    45.         function initAnimate(){   
    46.             cube._draw();   
    47.   
    48.             animate();   
    49.         }   
    50.   
    51.         function animate(){   
    52.             ctx.clearRect(0,0,canvas.width,canvas.height)   
    53.                
    54.             rotateY(cube.vectors);   
    55.             rotateX(cube.vectors);   
    56.             cube._draw();   
    57.             if("requestAnimationFrame" in window){   
    58.                 requestAnimationFrame(animate);   
    59.              }   
    60.             else if("webkitRequestAnimationFrame" in window){   
    61.                 webkitRequestAnimationFrame(animate);   
    62.              }   
    63.             else if("msRequestAnimationFrame" in window){   
    64.                 msRequestAnimationFrame(animate);   
    65.              }   
    66.             else if("mozRequestAnimationFrame" in window){   
    67.                 mozRequestAnimationFrame(animate);   
    68.              }   
    69.             autre {   
    70.                 setTimeout(animate , 16);   
    71.              }   
    72.         }   


    Je ne publierai pas tout le code, vous pouvez le voir via la console dans la DEMO. Je n'ai fait référence à aucun autre framework ou quoi que ce soit du genre, copiez-le simplement et vous pourrez l'utiliser.

    Après avoir écrit un cube rotatif, vous pouvez également créer plusieurs cubes rotatifs.
    2015512164340019.png (484×463)

    Poke DEMO : Face : 3D Cube 2 3D Cube Line (Je pense juste que c'est plus cool sans visages)

Déclaration
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
H5 est-il un raccourci pour HTML5? Explorer les détailsH5 est-il un raccourci pour HTML5? Explorer les détailsApr 14, 2025 am 12:05 AM

H5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.

H5 et HTML5: termes couramment utilisés dans le développement WebH5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AM

H5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.

À quoi se réfère H5? Explorer le contexteÀ quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5: outils, cadres et meilleures pratiquesH5: outils, cadres et meilleures pratiquesApr 11, 2025 am 12:11 AM

Les outils et les frameworks qui doivent être maîtrisés dans le développement H5 incluent Vue.js, React et WebPack. 1.Vue.js convient à la construction d'interfaces utilisateur et prend en charge le développement des composants. 2. React optimise le rendu de la page via Virtual DOM, adapté aux applications complexes. 3.WebPack est utilisé pour l'emballage des modules et optimiser le chargement des ressources.

L'héritage de HTML5: Comprendre H5 dans le présentL'héritage de HTML5: Comprendre H5 dans le présentApr 10, 2025 am 09:28 AM

Html5hassignifytransformedwebdevelopmentByIntroduCingSémanticElements, améliorant laMultimeSupport, et improvingperformance.1) itmadewebsitesMoreAccessSiblendSeo-friendlywithsemiticslike, et.2)

Code H5: accessibilité et HTML sémantiqueCode H5: accessibilité et HTML sémantiqueApr 09, 2025 am 12:05 AM

H5 améliore l'accessibilité des pages Web et les effets SEO via des éléments sémantiques et des attributs ARIA. 1. Utiliser, etc. pour organiser la structure du contenu et améliorer le référencement. 2. Les attributs ARIA tels que Aria-Babel améliorent l'accessibilité, et les utilisateurs de technologies d'assistance peuvent utiliser en douceur les pages Web.

H5 est-il le même que HTML5?H5 est-il le même que HTML5?Apr 08, 2025 am 12:16 AM

"H5" et "HTML5" sont les mêmes dans la plupart des cas, mais ils peuvent avoir des significations différentes dans certains scénarios spécifiques. 1. "Html5" est une norme définie par W3C qui contient de nouvelles balises et API. 2. "H5" est généralement l'abréviation de HTML5, mais dans le développement mobile, il peut se référer à un cadre basé sur HTML5. Comprendre ces différences aide à utiliser ces termes avec précision dans votre projet.

Quelle est la fonction de H5?Quelle est la fonction de H5?Apr 07, 2025 am 12:10 AM

H5, ou HTML5, est la cinquième version de HTML. Il fournit aux développeurs un ensemble d'outils plus fort, ce qui facilite la création d'applications Web complexes. Les fonctions principales de H5 incluent: 1) des éléments qui permettent de dessiner des graphiques et des animations sur les pages Web; 2) Tags sémantiques tels que, etc. pour rendre la structure de la page Web claire et propice à l'optimisation du référencement; 3) de nouvelles API telles que GeolocationAPI prennent en charge les services basés sur la localisation; 4) La compatibilité entre les navigateurs doit être assurée par le biais de tests de compatibilité et de bibliothèque polyfillaire.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP