Wir nehmen häufig an verschiedenen E-Commerce-Werbeaktivitäten teil, z. B. den Kauf eines bestimmten Betrags für die Durchführung von Lotterieaktivitäten wie WeChat-Lotterie, Taobao-Lotterie, donnernde Geldverdiener-Bao-Lotterie-Aktivitäten usw. Diese Verlosungen werden teilweise von HTML5-Leinwand hergestellt. Heute werde ich Ihnen mitteilen, wie Sie HTML5 -Leinwand verwenden, um eine Disc -Verlosung zu erstellen. Schauen wir uns wie immer zuerst die Renderings an:
Schauen wir uns einige der Haupt -APIs von Leinwand an:
Alle Quellcodes sind wie folgt:
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>HTML5 Canvas Disc Lottery Application DEMO Demo</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><style>*{padding: 0px;margin: 0px; Schriftgröße: 16px; Schriftfamilie: "Microsoft Yahei";}. Xttblog_box {width: 300px; Höhe: 300px; Rand: 100px automatisch; Position: Relativ; }.xttblog_box canvas{position: absolute;}#xttblog{background-color: white;border-radius: 100%;}#xttblog01,#xttblog03{left: 50px;top: 50px;z-index: 30;}#xttblog02{left: 75px;top: 75px;z-index: 20;}#XTTblog {-o-transform: Transformation 6S; -ms-transform: Transformation 6S; -moz-transform: Transformation 6s; -Webkit-Transformation: Transformation 6s; Übergang: Transformation 6S; -O-Transform-Origin: 50% 50%;-MS-Transform-Origin: 50% 50%;-Moz-Transform-Origin: 50% 50%; 60px; links: 120px; top: 120px; border-radius: 100%; Position: absolut; Cursor: Zeiger; Grenze: Keine; Hintergrund: transparent; Umriss: Keine; Z-Index: 40;} </style> <script type = "text/javaScript" src = "http://cdn.bootcs.com/jquery/1.11.3/jquery.min.js"> </script> <script> $ (dokument). Farbe = ["#626262", "#787878", "RGBA (0,0,0,5)", "#DCC722", "Weiß", "#ff4350"]; Hard ',' Yuan ',' Yuan ',' Goldmünzen ',' Yuan ',' Gold Münzen '] canvasrun (); "Start Draw" kann nicht $ ('#tupbtn') angeklickt werden. ALERT ("Liebes, die Anzahl der Ziehungen wurde verwendet!"); $ ('#XTTBlog'). CSS ('-MS-Transform', Degvalue); $ ('#XTTBlog'). CSS ('Transformation', Degvalue); info [0] + info1 [0]; 2160 * ROTNUM + 1935; sonst (num == 5) {Winkel = 2160 * Rotnum + 2025; info [1] + info1 [1]; canvas02 = document.getElementById ('xttblog02'); createCircle (); endangle = startangle+math.pi*(1/4); Farbe [1]; ctx.save (); 14px microsoft yahei "; ctx.filltext (info1 [i],-30, -95,60); CTX1.LINETO (90,62); CTX3.ARC (100.100.40,0, Mathematik*2, Falsch); ctx3. fillstyle = color [4]; ctx2.ARC (75,75,75,0, math.pi*2, false); Der Browser unterstützt es nicht. </canvas> <canvas id = "xttblog01"> Entschuldigung! Der Browser unterstützt es nicht. </canvas> <canvas id = "xttblog03"> Entschuldigung! Der Browser unterstützt es nicht. </canvas> <canvas id = "xttblog02"> Entschuldigung! Der Browser unterstützt es nicht. </canvas> <button id = "tupbtn"> </button> </div> <!-Ändern Sie das System-Standard-Popup-Fenster-> <skript type = "text/javaScript"> Fenster.Alert = Funktion (str) {var shield = document.createelement ("div"); Shield.id = "Shield"; Shield.Style.position = "Absolute"; Shield.Style.Left = "50%"; Shield.Style.top = "50%"; Shield.Style.width = "280px"; Shield.Style.Height = "150px"; Shield.Style.Marginleft = "-140px"; Shield.Style.Margintop = "-110px"; Shield.Style.zindex = "25"; var alertfram = document.createelement ("div"); alertfram.id = "alertfram"; alertfram.Style.position = "Absolute"; alertfram.style.width = "280px"; alertfram.style.height = "150px"; alertfram.style.left = "50%"; alertfram.style.top = "50%"; alertfram.style.marginleft = "-140px"; alertfram.style.margintop = "-110px"; alertfram.style.textalign = "center"; alertfram.style.lineHeight = "150px"; alertfram.style.zindex = "300"; strhtml = "<ul style =/" Listenstil: Keine; Margin: 0px; Polster: 0px; Breite: 100%/">/n"; strhtml += "<li style =/" Hintergrund: #626262; text-align: links; padding-links: 20px; Schriftgröße: 14px; Schriftgewicht: fett; Höhe: 25px; Linienhöhe: 25px; Border: 1px Solid #f9cade; Farbe: White/"> [Reminder] </l] </n] </n] </n] </n] </n] </n] </n] </n] </l. strhtml+= "<li style =/" Hintergrund: #787878; Text-Align: Mitte; Schriftgröße: 12px; Höhe: 95px; Linienhöhe: 95px; Border-Links: 1PX Solid #f9cade; Border-arright: 1px Solid #f9cade; color: #dcc722/"+"+"+ strhtml += "<li style =/" Hintergrund:#626262; Text-Align: Mitte; Schriftgewicht: BOLD; Höhe: 30px; Zeilenhöhe: 25px; Rand: 1PX Solid #f9cade;/"> <Eingangsart =/" Taste/"value =/" OK/"Onclick =/" Dook ()/"style =/" width: 80px; Höhe: 20px; Hintergrund: #626262; Farbe: Weiß; Rand: 1px Solid White; Font-Size: 14px; Line-Height: 20px; Line-Height: 20px; Outline: Non; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendchild (alertfram); document.body.appendchild (Shield); this.dook = function () {alertfram.style.display = "Keine"; Shield.Style.Display = "Keine"; } alertfram.focus (); document.body.onSelectStart = function () {return false;};} </script> </body> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.
Originaladresse: http://www.xttblog.com/?p=399