Cet article présente principalement des informations pertinentes sur les exemples de dessins de polygones sur toile (diagramme en araignée). L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Comment dessiner des diagrammes en araignée :
Avant de commencer, nous devons savoir comment Canvas dessine des images. L'élément Canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas de HTML5 utilise JavaScript pour dessiner des images 2D sur des pages Web. Sur le canevas de la zone rectangulaire, contrôlez chaque pixel et utilisez JavaScript pour dessiner des graphiques 2D et les restituer pixel par pixel. Il existe de nombreuses façons d'utiliser l'élément canvas pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images.
*Attention ! ! ! La balise canvas elle-même n'a pas de fonctions de dessin et ne peut utiliser que JavaScript pour dessiner des images sur des pages Web.
Le rendu est le suivant :
1. Code js d'initialisation
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Dans le code ci-dessus, tous les paramètres sont initialisés via une fonction d'exécution immédiate. Pour savoir comment dessiner un hexagone régulier sur une toile, voir Dessiner un hexagone régulier sur une toile
Dans le graphique en araignée, nous pouvons le diviser en une seule fois, en dessinant des hexagones, des lignes droites et des cercles, des composants individuels complets sont dessinés séparément, puis des appels unifiés sont dessinés via les méthodes
comme indiqué ci-dessous :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
|
Recommandations associées :
Instance CSS3 de création d'une propriété de clip de polygone
le canevas dessine un polygone
Déterminer si un point appartient à un polygone dans MySQL_MySQL
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!