Nous participons souvent à diverses activités promotionnelles de commerce électronique, telles que l'achat à un certain montant pour mener des activités de loterie, telles que la loterie WeChat, la loterie Taobao, les activités de loterie de disque Bao de l'argent du tonnerre, etc. Ces tombes sont fabriqués en partie par HTML5 Canvas. Aujourd'hui, je vais partager avec vous comment utiliser le canevas HTML5 pour créer une fonction de tombola de disque. Comme d'habitude, regardons d'abord les rendus:
Jetons un coup d'œil à plusieurs API principales de Canvas:
Tous les codes source sont les suivants:
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <taptin> html5 canvas disque lottery application démo démo </ title> <meta name = "Viewport" content = "width = device-width, initial-scale = 1, user-scalable = no"> <style> * {padgin: 0px: user-scalip 0px; Font-Size: 16px; Font-Family: "Microsoft Yahei";}. XTTBLOG_BOX {largeur: 300px; hauteur: 300px; marge: 100px auto; position: relative; } .xttblog_box Canvas {position: absolue;} # xtTBlog {background-Color: White; Border-Radius: 100%;} # xtTBlog01, # xtTBlog03 {Left: 50px; top: 50px; z-index: 30;} # xttblog02 {gauche: 75px; top: 75px; 20;} # XTTBLOG {-o-transform: transform 6s; -ms-transform: transform 6s; -moz-transform: transform 6s; -Webkit-Transform: Transform 6s; Transition: Transform 6s; -o-transform-origin: 50% 50%; - MS-Transform-Origin: 50% 50%; - Moz-Transform-Origin: 50% 50%; WEBKIT-TRANSFORM-ORIGIN: 50% 50%; TRANSFORM-ORIGIN: 50% 50%;}. 60px; gauche: 120px; top: 120px; border-radius: 100%; position: absolu; curseur: pointeur; bordure: aucun; fond: transparent; contour: aucun; z-index: 40;} </ style> <script type = "text / javascript" src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <cript> $ (document) .ready (function () {// rotation angle angles; // nombre de tirages var clicknum = 5; // nombre de rotation var rotnum = 0; // annoncement de victoire var vawa novice = null; [# 626262 "," # 787878 "," RGBA (0,0,0,0,5) "," # dcc722 "," blanc "," # ff4350 "]; Hard ',' Yuan ',' Yuan ',' Gold Coins ',' Yuan ',' Gold Coins '] canvasrun (); $ (' # tupbtn '). Bind (' click ', function () {if (clicknum> = 1) {// Le nombre de tirages peut être réduit par un clic = clic-1; // le rotation de Turntable Rotcup (); Le bouton "start Draw" ne peut pas être cliqué sur $ ('# tupbtn). Attr (Disabled ", true); alerte (cher, le nombre de tirages a été utilisé! ");}}); $ ('# XTTBLOG'). CSS ('- MS-Transform', DegValue); $ ('# XTTBLOG'). info [0] + info1 [0];} // Probabilité si (num == 1) {angles = 2160 * RotNum + 1845; 2160 * Rotnum + 1935; else if (num == 5) {angles = 2160 * Rotnum + 2025; info [1] + info1 [1];}} // dessiner la fonction de plate-forme canvasrun () {var canvas = document.getElementByid ('xtTBlog'); canvas02 = document.getElementyid (XTTBLOG02 '); createCirText (); Startangle + Math.PI * (1/4); Ctx.stroke (); CTX.BeginPath (); Yahei "; ctx.fillText (info1 [i], - 30, -95,60); ctx.closepath (); ctx.restore ();}} function initpoint () {// arrow pointer ctx1.beginpath (); ctx1.moveto (100,24); ctx1.lineto (90,62); CTX1.LIMETO (110,62); CTX3.FillStyle = Color [5]; CTX3.FILLATS (Start ', 80,90,40); Couleur [2]; Le navigateur ne le prend pas en charge. </ canvas> <canvas id = "xttblog01"> désolé! Le navigateur ne le prend pas en charge. </ canvas> <canvas id = "xttblog03"> désolé! Le navigateur ne le prend pas en charge. </ canvas> <canvas id = "xttblog02"> désolé! Le navigateur ne le prend pas en charge. </ canvas> <bouton id = "tupbtn"> </ bouton> </div> <! - Modifiez la fenêtre pop-up par défaut du système -> <script type = "text / javascript"> window.Alert = function (str) {var shield = document.createelement ("div"); shield.id = "shield"; shield.style.position = "absolu"; 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 = "absolu"; 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 = "Centre"; alertfram.style.lineHeight = "150px"; alertfram.style.zindex = "300"; strhtml = "<ul style = /" list-style: Aucun; marge: 0px; padding: 0px; largeur: 100% / "> / n"; strhtml + = "<li style = /" background: # 626262; text-align: Left; padding-left: 20px; font-size: 14px; fronde-weight: bold; hauteur: 25px; line-height: 25px; border: 1px solide # f9cade; couleur: white / "> [gagnant rappel] </li> / n"; strhtml + = "<li style = /" Background: # 787878; text-align: Center; font-size: 12px; hauteur: 95px; line-height: 95px; border-left: 1px solide # f9cade: border-right: 1px solide # f9cade; couleur: # dcc722 / ">" + str + "</ li> / n; strhtml + = "<li style = /" arrière-plan: # 626262; Text-Align: Center; Font-Weight: Bold; Height: 30px; line-height: 25px; Border: 1px solide # f9cade; / "> <entrée type = /" bouton / "value = /" ok / "onclick = /" dook () / "style = /" width: 80px; hauteur: 20px; fond: # 626262; couleur: blanc; bord 4px / "/> </li> / n"; strhtml + = "</ul> / n"; alertfram.innerhtml = strhtml; Document.Body.ApendChild (alertfram); Document.Body.ApendChild (Shield); this.dook = function () {alertfram.style.display = "Aucun"; shield.style.display = "Aucun"; } alertfram.focus (); document.body.onselectStart = function () {return false;};} </script> </body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.
Adresse d'origine: http://www.xttblog.com/?p=399