Unter den Projekten, die ich zuvor durchgeführt habe, gibt es diejenigen, die die Lotterie -Plattenspieler -Funktion benötigen. Das Projekt ist für eine Weile abgeschlossen und es gibt keine ernsthaften Fehler, also werde ich es jetzt mit Ihnen teilen.
Funktionale Anforderungen
1. Der Plattenspieler sollte schön sein und der Rotationseffekt sollte glatt sein.
2. Das Preisbild muss auf dem Plattenspieler angezeigt werden, und der Preis ist das im Hintergrund gelesene Foto und Name.
3. Nach Abschluss der Rotationsanimation müssen entsprechende Eingabeaufforderungen vorliegen.
V.
Schlüsselpunkte des Wissens
1. Ein JQ-Plug-In wird verwiesen: Preisträger, mit dem zur Erzielung einer intelligenten Rotation verwendet wird (Plugin-Download: http://www.jqcool.net/jquery-jqueryRotate.html).
2. Verwenden Sie das Canvas -Tag und die entsprechende HTML5 -API zum Betrieb. (Canvas Chinese Manual kann unter http://javascript.ruanyifeng.com/htmlapi/canvas.html angesehen werden
Text
Zitieren Sie einen großen Plattenspieler -Stil
.lunck_draw_wrap {display: block; width: 95%; margin-right: auto;} .lunck_draw_wrap. Position: relativ;} .lunck_draw_wrap. Position: Relativ; Top: 9px; Breite: 100%;} .lunck_draw_wrap. Turnplate img.pointer {Höhe: 37,5%; Links: 34,6%; Position: absolut; Top: 30%; Breite: 31,5%;}Erforderliche Parameter für Plug-In: Plug-In:
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, // Radius des inneren Kreises der großen Turnplate Startangle: 0, // Startwinkel Brotate: Falsch // Falsch: Stopp; ture: rotieren};Aus den Parametern müssen wir den entsprechenden Preisnamen, den Preisinhalt, die Preisprobial -Seite und andere Informationen aus dem Server erhalten und dann den großen Plattenspieler rendern.
Unser erster Schritt besteht darin, eine Anfrage an den Server zu senden, um die entsprechenden Preisinformationen zu erhalten und sie an die Array -Parameter zu durchqueren, die zum Generieren des großen Plattentabels erforderlich sind:
$ .each (Data.List, Funktion (Schlüssel, Wert) {Turnplate.Restarunts.push (value.data0); Turnplate.lucky.push (value.data1); Turnplate.goodSIMgarr.push (getLuckyimg + value.data4); if (Schlüssel %2 == 0) Turnplate.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.colors.push.push ("#fffy); Turnplate.Colors.push ("#5fcbd4");Data.List sind die JSON -Daten, die ich erhalten habe:
[{"data0": "Erster Preis", "Data1": "iPhone6s", "Data2": "0", "Data3": "0", "Data4": "201510161406303384.png", "Data5": "Xxxx -Netzwerk -Technologie", "Data6": xxxxxxx, Keecheng, Keecheng, Keecheng, Keecheng, Keecheng, Keecheng, Keecheng, Keecheng District, Zyiang, "City": "City": ":": ":" xxxxxxx, "Keecheng, Kecheng District", "City", "City", ":" ":": ":": ":": ":": ":": ":": ":": ":" xxxxxxxxxxxxxxxxxxx. "Data7": "0570-xxxxxx"}, ......]Da der Kunde den Preis für "Danke für die Teilnahme" verlangt, ist der Mindestpreis auch "Gewinnpreis". Fügen Sie nach dem Durchqueren des Preises die Rendering -Beschreibung des "Gewinnerpreises" ein:
Turnplate.goodsimgarr.push ('../ Images/Hongbao.png') Turnplate.restarunts.push ("Gewinner"); Turnplate.Colors.push ("#5fcbd4"); // Führen Sie nach allen Elementen der Seite die Methode Drawroulettewheel () aus, um die Plünderung der Turntable vorlegt (Turnplate.GoodSimgarr).Da das Bildladung Zeit in Anspruch nimmt und das Bild mithilfe von Leinwand kopiert werden muss, muss das Bild geladen werden, bevor es gezogen werden kann. Daher habe ich vorlastete, um den großen Plattenteller zu rendern, nachdem alle Preisbilder geladen wurden:
// Vorlastfunktion Vorladung (arr) {var newImages = [], LoadedImages = 0 var postaction = function () {} // Eine Postaktionsfunktion wurde hinzugefügt. Var arr = (typeof arr! Postaktionsfunktion und übergeben das neue Array als Parameter}} für (var i = 0; i <arr.length; i ++) {newimages [i] = newimage () newImages [i] .src = arr [i] newimages [i] .onload = function () {) {)}}}}}} | Rückgabe {// Die gemessene Methode eines leeren Objekts wird hier zurückgegeben: Funktion (f) {postaction = f || Postaktion}}}Zeichnen Sie den Plattenspieler Code:
Funktion Drawroulettewheel () {var canvas = document.getElementById ("Wheelcanvas"); if (canvas.getContext) {// Berechnen Sie den Umfangswinkel basierend auf der Anzahl der Preise var ark = math.pi /(Turnplate.restarunts.length /2); var ctx = canvas.getContext ("2d"); // Ein Rechteck im angegebenen Rechteck ctx.ClearRect (0,0,422,422) löschen; // Strokestyle -Eigenschaft setzt die Farbe, den Gradienten oder das Muster zurück, die für Strokes Ctx.strokestyle = "RGBA (0,0,0,0)" verwendet werden. // Eigeneigenschaftseinstellungen oder zurückgeben oder das aktuelle Schriftart des Textinhalts auf der Canvas ctx.font = 'BOLD 18PX Microsoft Yahei'; für (var i = 0; i <rurnplate // Zeichnen Sie die Farbe der Lüfterfüllung nach den Preisparametern ctx.FillStyle = Turnplate.colors [i]; // Zeichnen Sie Fan ctx.beginPath (); // ARC (x, y, r, Startwinkel, Endwinkel, Zeichnenrichtung) Die Methode erzeugt Arc/Kurve (zum Erstellen von Kreisen oder partiellen Kreisen) // Zeichnen Sie großen Kreis ctx.arc (212,212, Turnplate.outsideradius, Winkel, Winkel + Ark, Falsch); // kleine Kreis ctx.arc zeichnen (212,212, Turnplate.Insideradius, Winkel + Bogen, Winkel, wahr); ctx.stroke (); ctx.fill (); // die Leinwand sperren (um den vorherigen Canvas -Zustand zu speichern) ctx.save (); // --- Zeichnen Sie den Preisstart ---- // Preis default-Schriftart ctx.fillstyle = "#fff"; var text = Turnplate.Restarunts [i]; var lukyname = Turnplate.lucky [i]; var line_height = 17; // Methodenrichter (0,0) auf der Leinwandposition ctx.translate (212 + math.cos (Winkel + ARC /2)* Turnplate.textradius, 212 + Math.sin (Winkel + ARC /2)* Turnplate.Textradius); // Drehmethode dreht die aktuelle Zeichnung ctx.rotate (Winkel + ARC /2+Math.pi /2); // Zeichnen Sie das Preisbild var img = newImage (); img.src = Turnplate.goodsimgarr [i]; ctx.drawimage (IMG, -17,35); // Da die ausgelegten Plattenspieler -Farbblöcke verschachtelt sind, kann dies in benachbarten Preisbereichen unterschiedliche Schriftfarben erzielen, wenn (i %2 == 0) {ctx.fillstyle = "#f7452f"; } // Die Schriftart an der entsprechenden Koordinaten-CTX.FillText (Text, -CTX.Measuretext (Text) .Width /2,0) zeichnen; // Setzen Sie die font ctx.font = '14px microsoft yahei'; // den Preisnamen zeichne if (text! } else {ctx.fillText ("Youmai Coin",-ctx.measuretext ("Youmai Coin"). Breite /2,25); } // Die aktuelle Leinwand (einfügen) zurückgibt, bevor der vorherige Save () Status ctx.restore (); ctx.save (); // --------------------------}}}}Es gibt im Grunde genommen Kommentare zu jedem Schritt. Wenn Sie die Canvas -Methode nicht verstehen, können Sie Baidu oder das oben geteilte chinesische Handbuch verwenden.
Der HTML -Code lautet:
<divclass="lunck_draw_wrap"> <divclass="turnplate"style=" background-size:100%100%;"> <canvasclass="item"id="wheelcanvas"width="422px"height="422px"></canvas> <imgclass="pointer"style="top:0px; left:0px; width:100%; Höhe: 100%; "src =" ../ Bilder/Chouzhang12.png "/> <imgclass =" pointer "src =" ../ Images/hianji .png "/> </div>
Reproduktionsbild:
Klicken Sie auf Ereignis, um den Code auszuführen:
$ ('. abnormal, 1092 User remaining points are insufficient, 1093 Unwinned hideInput("code",data.code) if(data.code.toString()=="1090"){ iosalet("system configuration error") }elseif(data.code.toString()=="1091"){ iosalet("User not logged in or user data exception") } elseif (data.code.toString () == "1092") {iosalet ("Unter den verbleibenden Punkten vom Benutzer")} elseif (data.code.toString () == "1094") {Iosalet ("über die Anzahl der Züge pro Tag") {var upoint = 0). ParseInt ("#Spoint"). Html ()); rotatefn (0, "Herzlichen Glückwunsch zum Gewinn des Gewinnungspreises!")}}})});Der obige Code implementiert grundlegende Logik und erfordert auch eine Methode, um den Plattenspieler auf die vom Server übertragenen Ergebnisse zu reagieren:
// Drehen Sie den Plattenspieler: Preisposition; txt: prompt; var rotateFn = function (item, txt) {// Berechnen Sie den entsprechenden Radian basierend auf der Anzahl der übertragenen Preise var Winles = item *(360/Turnplate.Restarts.length)-(360/(Turnplate if (Winkel <270) {Angles = 270- Winkel; } else {Angles = 360- Winkel +270; } // STOPTIBLE den Plattenspieler $ ('#Wheelcanvas'). StopRotate (); // Berechnung der Rotationsmethode, Einstellung der erforderlichen Parameter und Rückruffunktion $ ('#Wheelcanvas'). Drehen ({// Startwinkelwinkel: 0, // Der Rotationswinkel +1800 besteht darin, ein paar weitere Wendungen zu drehen, an die Animateto: Winkel +1800, Dauer: 8000, Funktion () {) {IOssucess (TXT); if ($ ("#code"). val ()! };OK, die Hauptfunktionscodes wurden geteilt und einige Tools und Methoden werden nicht verstanden. Sie können eine Nachricht hinterlassen und ich werde sie hinzufügen.
Zusammenfassen
Leinwand ist ein sehr mächtiges Ace von HTML5 und kann viele brillante Effekte erzielen. Ich hoffe, dieser Artikel kann einigen Freunden helfen, die lernen, Leinwand zu benutzen.