Les exemples de cet article partagent le code spécifique de la loterie JS pour votre référence. Le contenu spécifique est le suivant
1. Effets de base réalisés
2. Contenu principal
• Utilisation des étiquettes de toile dans HTML5
• JQUERYROTate.js Plugin de rotation
3. Code HTML principal
<body> <div> <div> <canvas id = "wheelCanvas"> </ canvas> <img src = "images / wheel-pointer.png" /> </ div> </ div> <div> <span id = "Tip"> Jason </span> </ div> </ body> </html>
4. code CSS principal
.Content {affichage: bloc; Largeur: 95%; marge: 30px auto;}. Contenu .Wheel {affichage: bloc; Largeur: 100%; Position: relative; Background-Image: URL (../ images / wheel-bg.png); Background-Size: 100% 100%;}. Content .Wheel Canvas.Item {width: 100%;}. Content .Wheel img.pointer {position: absolu; Largeur: 31,5%; hauteur: 42,5%; Gauche: 34,6%; En haut: 23%;}. TIPS {Text-Align: Centre; marge: 20px 0; Police: normal 24px 'Microsoft Yahei';}5. CODE JS CODE
/ * * Rendre la plate-forme * * / Fonction DrawwheelCanvas () {// Obtenez le canevas artboard, équivalent à la couche? ? var canvas = document.getElementById ("wheelCanvas"); // var canvas = ($ ("# wheelCanvas")). get () [0]; // Notez que jQuery obtient un objet enveloppé, pas un objet DOM, et peut être converti // calculer l'angle occupé par chaque bloc, Radian System var BasEAngle = math.pi * 2 / (Turnwheel.RewardNames.Length); // Obtenez le contexte var ctx = canvas.getContext ("2d"); var canvasw = canvas.width; // Hauteur du artboard var canvash = canvas.height; // Largeur de l'artboard // Effacer un rectangle dans le rectangle donné ctx.clearrect (0,0, canvasw, canvash); // strokestyle dessine la couleur ctx.strokestyle = "# ffbe04"; // Red // Police Current Font Attribut du contenu texte sur le canevas ctx.font = '16px Microsoft Yahei'; // Notez que la position de départ est tirée de l'angle de 0 °. C'est-à-dire la direction horizontalement vers la droite. // dessine un contenu spécifique pour (var index = 0; index <Turnwheel.RewardNames.length; index ++) {// Angle de courant var angle = Turnwheel.startangle + index * BaseAngle; // remplit la couleur ctx.fillStyle = Turnwheel.Colors [index]; // Commencez à dessiner du contenu // ------------------------------- ctx.beginpath (); / * * Dessiner des arcs, similaires à Quartz2d dans iOS * context.arc (x, y, r, sangle, eangle, dans le sens antihoraire); * x: le point central du cercle x * y: le point central du cercle x * sangle, eangle: angle de démarrage, angle d'extrémité * dans le sens antihoraire: dessiner la direction, facultatif, false = dans le sens horaire, true = dans le sens antihoraire * * / ctx.arc (canvasw * 0,5, canvash * 0,5, tour de virage.oudsideradius, angle + baslegle, false); ctx.arc (canvasw * 0,5, canvash * 0,5, turnwheel.insideradius, angle + baseAngle, true); ctx.stroke (); ctx.fill (); // Enregistrez l'état de la toile, similaire à la pile de contexte graphique. Vous pouvez restaurer l'état ultérieur (les coordonnées sont restaurées au courant 0, 0), ctx.save (); / * ---- dessiner le contenu du prix -------- * / // Font rouge ctx.fillStyle = "# e5302f"; var rewardName = Turnwheel.rewardNames [index]; var line_height = 17; // traduire la position de la méthode Remap (0,0) sur le canevas // context.translate (x, y); // Voir l'image PPT, var tradlatex = canvasw * 0,5 + math.cos (angle + baseAngle / 2) * Turnwheel.Textradius; var tradlatey = canvash * 0,5 + math.sin (angle + baseAngle / 2) * Turnwheel.textradius; CTX.TRANSLATE (Translatex, Translatey); // La méthode rotative tourne le dessin actuel car le texte convient à la ligne centrale du secteur actuel perpendiculaire! // angle, l'angle de rotation du courant du ventilateur lui-même + BasEAngle / 2 L'angle de la ligne centrale est multi-rotatif + angle vertical 90 ° CTX.ROTate (angle + baseAngle / 2 + math.pi / 2); / ** Le code suivant rend différents effets en fonction du type de prix et de la durée du nom de prix, tels que la police, la couleur et les effets d'image. (Changement spécifiquement en fonction de la situation réelle) ** / // La méthode MeasureText () de Canvas renvoie un objet contenant la largeur de police spécifiée dans les pixels. // Méthode FillText () dessine du texte rempli sur la toile. La couleur par défaut du texte est noire. La propriété FillStyle rend le texte avec une autre couleur / gradient / * * context.fillText (texte, x, y, maxwidth); * Note! ! ! y est la valeur inférieure du texte, pas la valeur supérieure! ! ! * 11 pour (var j = 0; j <rewardNames.length; j ++) {ctx.font = (j == 0)? 'Bold 20px Microsoft Yahei': '16px Microsoft Yahei'; if (j == 0) {ctx.fillText (rewardNames [j] + "m", -ctx.measureText (rewardNames [j] + "m"). width / 2, j * line_height); } else {ctx.fillText (rewardNames [j], -ctx.measureText (rewardNames [j]). width / 2, j * line_height); }}} else if (rewardName.Indexof ("M") == -1 && rewardname.length> 6) {// La longueur du nom de prix dépasse une certaine plage rewardname = rewardName.SubString (0,6) + "||" + rewardname.SubString (6); var rewardNames = rewardName.split ("||"); pour (var j = 0; j <rewardNames.length; j ++) {ctx.fillText (rewardNames [j], -ctx.measureText (rewardNames [j]). width / 2, j * line_height); }} else {// Dessinez le texte coloré sur la toile. La couleur par défaut du texte est noire ctx.fillText (RewardName, -ctx.MeasureText (RewardName) .Width / 2, 0); } // Ajouter l'icône correspondante if (rewardName.Indexof ("qcoin")> 0) {// Notez que vous devez attendre que le chargement IMG soit terminé avant que IMG puisse dessiner imgqb.onload = function () {ctx.drawImage (imgqb, -15,10); }; ctx.DrawImage (IMGQB, -15,10); } else if (rewardName.Indexof ("merci pour avoir participé")> = 0) {imgsorry.onload = function () {ctx.drawImage (imgsorry, -15,10); }; CTX.DrawImage (IMGSorry, -15,10); } // restaurer () Avant de restaurer l'état de l'art à l'état Save () précédent ctx.Restore (); / * -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------enfin
Cette chose est presque la même que la technologie Quartz2D dans iOS ...
Code détaillé >>>> cliquez pour télécharger
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.