Parmi les projets que j'ai réalisés auparavant, il y a ceux qui ont besoin de la fonction de plate-forme de loterie. Le projet est achevé depuis un certain temps et il n'y a pas de bugs sérieux, donc je vais le partager avec vous maintenant.
Exigences fonctionnelles
1. La plaque tournante doit être belle et l'effet de rotation doit être lisse.
2. L'image du prix doit être affichée sur la plaque tournante, et le prix est la photo et le nom lu en arrière-plan.
3. Une fois l'animation de rotation terminée, il doit y avoir des invites correspondantes.
4. L'algorithme spécifique pour le prix obtenu est exploité dans la base de données, et le frontal ne fournit que l'affichage d'effet final.
Points clés de la connaissance
1. Un plug-in JQ est référencé: privilège, qui est utilisé pour atteindre une rotation plus intelligente (téléchargement du plugin: http://www.jqcool.net/jquery-jqueryrotate.html).
2. Utilisez la balise Canvas et l'API HTML5 correspondante pour fonctionner. (Le manuel chinois Canvas peut être consulté sur http://javascript.ruanyifeng.com/htmlapi/canvas.html
texte
Citer un grand style de platine
.lunck_draw_wrap {affichage: block; width: 95%; margin-droite: auto;} .lunck_draw_wrap .Turnplate {affichage: block; width: 106%; Position: relative;} .lunck_draw_wrap .Turnplate canvas.item {Left: 1px; Position: relative; En haut: 9px; Largeur: 100%;} .lunck_draw_wrap .Turnplate img.pointer {height: 37,5%; Gauche: 34,6%; Position: absolue; TOP: 30%; Largeur: 31,5%;}Paramètres requis pour le plug-in de platine:
var turnplate ={ restaraunts:[],//Big turnplate prize name lucky:[],//Big turnplate content colors:[],//Big turnplate prize block corresponds to background color goodsimgArr:[],//Big turnplate picture page tag outsideRadius:175,//Radius of the outer circle of the large turnplate textRadius:140,//Distance of the prize position from the center of the circle InsideRadius: 65, // rayon du cercle intérieur du grand tournant startangle: 0, // Angle de démarrage Brotate: false // false: stop; ture: rotate};À partir des paramètres, nous devons obtenir le nom de prix, le contenu du prix, le prix du prix, l'étiquette de la page d'image du prix et d'autres informations sur le serveur, puis rendre la grande platine.
Notre première étape consiste donc à envoyer une demande au serveur pour obtenir les informations de prix correspondantes et à la traverser aux paramètres du tableau requis pour générer la grande platine:
$ .each (data.list, fonction (key, valeur) {tournure.restarants.push (value.data0); tourning.lucky.push (value.data1); tourning.goodsimgarr.push (getluckyimg + value.data4); if (key% 2 == 0) tournge.Colors.push ("# fff"); tournure.colors.push ("# 5fcbd4");data.list est les données JSON que j'ai obtenues:
[{"data0": "premier prix", "data1": "iPhone6s", "data2": "0", "data3": "0", "data4": "2015101614063033844.png", "data5": "xxxx network Technology", "data6": "xxxxx, kecheng district, quzhou city, zhejiang", xxxxx. "data7": "0570-xxxxxx"}, ......]Étant donné que le client exige que le prix soit "merci pour la participation", le prix minimum est également "le prix de la victoire". Donc, après avoir traversé le prix, insérez la description de rendu du "prix de victoire":
tournure.goodsimgarr.push ('../ images / hongbao.png') tournure.restaraNTS.push ("winner"); tournure.colors.push ("# 5fcbd4"); // Une fois que tous les éléments de la page sont chargés, exécutez la méthode Drawroulettewheel () pour rendre les préloadimages de platine (tournage.goodsimgarr) .done (fonction (images) {drawroulettewheel ();});Parce que le chargement de l'image prend du temps et que la copie de l'image à l'aide de Canvas nécessite le chargement de l'image avant de pouvoir être dessinée, j'ai donc utilisé des préloadimages pour rendre la grande platine après toutes les images de prix sont chargées:
// Fonction de précharge préloadimages (arr) {var newImages = [], chareDImages = 0 var postAction = function () {} // Une fonction postaction a été ajoutée ici var arr = (typeof arr! = "Object")? [Arr]: Arr Function ImageLoadPost () {chargedImages ++ (LoadEDIMages == arr.Length) Appelez la fonction postaction et transmettez le tableau NewImages en tant que paramètres}} pour (var i = 0; i <arr.length; i ++) {newImages [i] = newImage () newimages [i] .src = arr [i] newimages [i] .onLoad = function () {imageLoadPost ()} newimages [i] .oner }} return {// La méthode terminée d'un objet vierge est renvoyée ici: fonction (f) {postaction = f || Postaction}}}Dessinez le code de la plate-forme:
fonction drawRoulettewheel () {var canvas = document.getElementById ("wheelCanvas"); if (canvas.getContext) {// Calculez l'angle circonférentiel en fonction du nombre de prix var arc = math.pi /(turnplate.RestaraNts.length / 2); var ctx = canvas.getContext ("2d"); // effacer un rectangle dans le rectangle donné CTX.ClearRect (0,0,422,422); // La propriété Strokestyle définit ou renvoie la couleur, le gradient ou le motif utilisé pour les coups ctx.strokestyle = "rgba (0,0,0,0)"; // Paramètres de la propriété de police ou renvoyez l'attribut de police actuel du contenu texte sur le canevas ctx.font = 'Bold 18px Microsoft Yahei'; pour (var i = 0; i <tour de tour.RestaraNTS.length; i ++) {// Calculez le ventilateur dessiné radian en fonction de l'index actuel var angle = tournage.startangle + i * arc; // dessine la couleur de remplissage du ventilateur en fonction des paramètres du prix ctx.fillStyle = tournure.colors [i]; // commence à dessiner le ventilateur ctx.beginpath (); // arc (x, y, r, angle de démarrage, angle d'extrémité, direction de dessin) crée un arc / courbe (utilisé pour créer des cercles ou des cercles partiels) // dessiner de grand cercle CTX.ARC (212,212, tournage.oudsideradius, angle, angle + arc, false); // dessiner un petit cercle CTX.ARC (212,212, tournure.insideRadius, angle + arc, angle, vrai); ctx.stroke (); ctx.fill (); // verrouiller le canevas (pour enregistrer l'état de toile précédent) ctx.save (); // --- dessinez le start du prix ---- // Prix Couleur de police par défaut CTX.FillStyle = "# FFF"; var text = tournure.restaraNTS [i]; var lukyName = tournure.lucky [i]; var line_height = 17; // traduire la méthode remaps (0,0) sur la position du canevas ctx.translate (212 + math.cos (angle + arc / 2) * tournoi.textradius, 212 + math.sin (angle + arc / 2) * tournoi.textradius); // Méthode tournante fait pivoter le dessin de courant ctx.rotate (angle + arc /2+math.pi / 2); // dessine l'image du prix var img = newImage (); img.src = tournure.goodsimgarr [i]; CTX.DrawImage (IMG, -17,35); // Parce que les blocs de couleur de la plate-forme conçus sont entrelacés, cela peut atteindre différentes couleurs de police dans les zones de prix adjacentes si (i% 2 == 0) {ctx.fillStyle = "# f7452f"; } // dessinez la police à la coordonnée correspondante ctx.fillText (texte, -ctx.measureText (texte) .Width / 2,0); // Définit la police ctx.font = '14px Microsoft Yahei'; // dessine le nom du prix if (text! = "Gain Prize") {ctx.fillText (lukyname, -ctx.measureText (LukYName) .Width / 2,25); } else {ctx.fillText ("Youmai Coin", - ctx.measureText ("Youmai Coin"). Largeur / 2,25); } // Renvoie le canevas actuel (insert) avant l'état Save () précédent ctx.Restore (); ctx.save (); // ------------------------------}}}Il y a essentiellement des commentaires sur chaque étape. Si vous ne comprenez pas la méthode Canvas, vous pouvez utiliser Baidu ou interroger le manuel chinois que j'ai partagé ci-dessus.
Le code HTML est:
<divclass = "lunck_draw_wrap"> <divclass = "tournure" style = "background-size: 100% 100%;"> <canvasclass = "item" id = "wheelCanvas" width = "422px" height = "422px"> </ canvas> <imgclass = "Pointer" Style = "Top: 0px; Left: 0px; Hauteur: 100%; "src =" ../ images / chouzhang12.png "/> <imgclass =" pointer "src =" ../ images / Hianji .png "/> </ div>
Image de reproduction:
Cliquez sur l'événement pour exécuter le code:
$ ('. lunck_draw_wrap'). Delegate ("img.pointer", "cliquez", function () {if (tourtlate.brotate) return; tourning.brotate =! tournonne.brotate; $ .getjson ("../ ajax / lottery.ashx", "" Data) {// 1090 System Configuration error, insertion, 1090 Configuration error de configuration, 1090 Configuration error de configuration, 1090 Configuration error de configuration, 1090 Configuration error de configuration, 1090 Configuration error de configuration, 1090 Configuration error, user, insertion non user, ou utilisateur. anormal, 1092 Les points restants de l'utilisateur sont insuffisants, 1093 Hideinput non levé ("code", data.code) if (data.code.toString () == "1090") {iosalet ("Erreur de configuration du système") {iealit ("." } elseif (data.code.toString () == "1092") {iosalEt ("Sous les points restants de l'utilisateur")} elseif (data.code.toString () == "1094") {iosét ("sur le nombre de tirages par jour")} else {var upoint = 0; parseInt ($ (# spoint "). html ()); $ (# upoint"). RotateFn (0, "Félicitations pour avoir remporté le prix gagnant!");}}}})});Le code ci-dessus implémente la logique de base et nécessite également une méthode de transformation de la platine pour répondre aux résultats transmis à partir du serveur:
// Tourne la plaque tournante: Position du prix; txt: invite; var rotatefn = fonction (item, txt) {// Calculez le radian correspondant en fonction du nombre de prix var angles transmis = élément * (360 / tour de tour.RestaraNTS.length) - (360 / (tour de tour.RestaraNTS.Length * 2)); if (angles <270) {angles = 270- angles; } else {angles = 360- angles +270; } // Arrêtez de force la platine $ ('# wheelCanvas'). Stoprotate (); // Calcul de la méthode de rotation, en réglant les paramètres requis et la fonction de rappel $ ('# wheelCanvas'). Rotate ({// Angle de démarrage Angle: 0, // L'angle de rotation +1800 est de tourner quelques tours de plus AnimateTo: Angles +1800, Durée: 8000, rappel: function () {iossuccess (txt); tournure. if ($ ("# code"). val ()! = "1093") {delayload (gethttppprefix + "graphicdetails.html? lukyid =" + $ ("# code"). Val ())}}}); };OK, les codes de fonction principaux ont été partagés et certains outils et méthodes ne sont pas compris. Vous pouvez laisser un message et je l'ajouterai.
Résumer
Canvas est un as très puissant de HTML5 et peut réaliser de nombreux effets brillants. J'espère que cet article peut aider certains amis qui apprennent à utiliser la toile.