Die Beispiele in diesem Artikel teilen den spezifischen Code der JS -Turntable -Lotterie als Referenz. Der spezifische Inhalt ist wie folgt
1. Grundauswirkungen erreicht
2. Hauptinhalt
• Verwendung von Leinwand -Tags in HTML5
• JQueryRotate.js Rotation Plugin
3. Haupt -HTML -Code
<body> <div> <div> <Canvas id = "Wheelcanvas"> </canvas> <img src = "bilder/rad-pointer.png"/> </div> </div> <div> <span id = "Tipp"> Jason </span> </div> </body> </html>
4. Haupt CSS -Code
.Content {display: block; Breite: 95%; Rand: 30px Auto;}. Inhalt .Wheel {display: block; Breite: 100%; Position: Relativ; Hintergrund-Image: URL (../ Images/Wheel-Bg.png); Hintergrundgröße: 100%100%;}. Inhalt .Wheel Canvas.Item {Breite: 100%;}. Breite: 31,5%; Höhe: 42,5%; Links: 34,6%; Top: 23%;}. Tipps {Text-Align: Mitte; Rand: 20px 0; Schriftart: Normal 24px 'Microsoft Yahei';}5. Kern -JS -Code
/ * * Rendern turntable ? var canvas = document.getElementById ("Wheelcanvas"); // var canvas = ($ ("#Wheelcanvas")). get () [0]; // Beachten Sie, dass JQuery ein verpacktes Objekt, kein DOM -Objekt, und umgewandelt werden kann // den Winkel, der von jedem Block besetzt ist, berechnet werden kann. // Erhalten Sie den Kontext var ctx = canvas.getContext ("2D"); var canvasw = canvas.width; // Höhe des altafel var canvash = canvas.height; // Breite der Kunstboote // Ein Rechteck im angegebenen Rechteck ctx.clearrect (0,0, Leinwand, Leinwand); // Strokestyle zeichne die Farbe ctx.strokestyle = "#ffbe04"; // rot // Beschriftungs aktuelle Schriftart des Textinhalts auf der Canvas ctx.font = '16px microsoft yahei'; // Beachten Sie, dass die Startposition aus dem 0 ° -Winkel gezogen wird. Das heißt, die Richtung horizontal nach rechts. // Zeichnen Sie den spezifischen Inhalt für (var index = 0; Index <TurnWheel.RewardNames.length; Index ++) {// Stromwinkel var Winkel = TurnWheel.Startangle+Index * BaseanGle; // Farbe füllen ctx.FillStyle = TurnWheel.Colors [Index]; // Inhalt mit dem Zeichnen von Inhalten starten // ------------------------------- ctx.beginPath (); /** Zeichnen Sie Bögen, ähnlich wie bei Quartz2d in iOS* context.arc (x, y, r, sangle, eangle, gegen den Uhrzeigersinn); * x: Der Mittelpunkt des Kreises x * y: Der Mittelpunkt des Kreises x * Absinken, eangle: Startwinkel, Endwinkel * gegen den Uhrzeigersinn: optional, falsch = im Uhrzeigersinn, true = gegen den Uhrzeigersinn * */ ctx.arc (Canvasw * 0,5, Canvash * 0,5, Turnwall. ctx.arc (Canvasw * 0,5, Canvash * 0,5, Turnheel.insideradius, Winkel + Basisangle, Richtig); ctx.stroke (); ctx.fill (); // Speichern Sie den Status der Leinwand, ähnlich dem Grafikkontextstapel. Sie können den Status später wiederherstellen (Koordinaten werden auf den Strom 0, 0, 0), ctx.save () wiederhergestellt. /*---- Zeichnen Sie den Preisinhalt --------*/ // Red Font ctx.fillstyle = "#e5302f"; var lohnname = Turnheel.VerwardNames [Index]; var line_height = 17; // Methode Remap (0,0) Position auf der Leinwand // context.translate (x, y); // Siehe PPT -Bild, var translatex = canvasw * 0,5 + math.cos (Winkel + Basisangle / 2) * TurnWheel.Textradius; var translatey = canvash * 0,5 + math.sin (Winkel + Basisangle / 2) * TurnAwel.textradius; ctx.translate (translatex, translatey); // Die Rotate -Methode dreht die aktuelle Zeichnung, da der Text für die aktuelle Sektor -Mittellinie senkrecht geeignet ist! // Winkel, der Stromrotationswinkel des Lüfters selbst + Basiangle / 2 Der Winkel der Mittellinie wird gedreht + Der vertikale Winkel 90 ° CTX.ROTAT (Winkel + Basisangle / 2 + math.pi / 2); /** Der folgende Code macht unterschiedliche Effekte entsprechend der Preis- und Preisnamenlänge, wie z. B. Schriftart, Farbe und Bildeffekte. (Sich speziell gemäß der tatsächlichen Situation ändern) **/ // Die Methode von mesuretext () gibt ein Objekt ein, das die angegebene Schriftbreite in Pixel enthält. // filtext () Methode zeichnet gefüllte Text auf der Leinwand. Die Standardfarbe des Textes ist schwarz. Die Fillstyle -Eigenschaft rendert Text mit einer anderen Farbe/Gradienten/ * * context.fillText (Text, x, y, maxwidth); * Notiz! ! ! Y ist der untere Wert des Textes, nicht der Top -Wert! ! ! * */if (polwname.indexof ("m")> 0) {// Abfragen Sie, ob die Feldverkehrspakete var polwnames = lohnname.split ("m") enthalten sind; für (var j = 0; j <polyNames.length; j ++) {ctx.font = (j == 0)? 'BOLD 20PX Microsoft Yahei': '16px microsoft yahei'; if (j == 0) {ctx.FillText (Belohnungen [j]+"m", -ctx.measuretext (Belohnungen [j]+"m"). Breite / 2, j * line_height); } else {ctx.FillText (Belohnungen [j], -ctx.measuretext (Belohnungen [j]). Width / 2, j * line_height); }}} else if (poardname.indexof ("m") == -1 && preisverkehrsame.length> 6) {// Die Länge des Preisnamens überschreitet einen bestimmten Bereich polyName = polyName.substring (0,6)+|| var lohnnames = lohnname.split ("||"); für (var j = 0; j <polyNames.length; j ++) {ctx.FillText (Belohnungen [j], -CTX.Measuretext (Belohnungen [j]). Width / 2, j * line_height); }} else {// Zeichnen Sie den farbigen Text auf der Leinwand. Die Standardfarbe des Textes ist schwarz ctx.fillText (Belohnung, -CTX.Measuretext (Belohnung) .Width / 2, 0); } // Fügen Sie das entsprechende Symbol hinzu, wenn (poardname.indexof ("qcoin")> 0) {// Beachten Sie, dass Sie warten müssen, bis die Lade im IMG abgeschlossen ist, bevor IMG imgqb.onload = function () {ctx.drawimage (IMGQB, -15,10) zeichnen kann; }; ctx.drawimage (IMGQB, -15,10); } else if (polwerName.indexof ("Danke für die Teilnahme")> = 0) {imgSorry.onload = function () {ctx.drawimage (imgSorry, -15,10); }; ctx.drawimage (imgsorry, -15,10); } // restore () vor der Wiederherstellung des Zustands der Kunstkarte in den vorherigen Save () state ctx.restore (); /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------endlich
Dieses Ding entspricht fast der Quartz2d -Technologie in iOS ...
Detaillierter Code >>>> Klicken Sie zum Herunterladen klicken
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.