A menudo participamos en varias actividades promocionales de comercio electrónico, como comprar a una cierta cantidad para realizar actividades de lotería, como la lotería Wechat, la lotería Taobao, las actividades de lotería de disco BAO de trueno, etc. Estas rifas son realizadas en parte por HTML5 Canvas. Hoy compartiré con usted cómo usar el lienzo HTML5 para crear una función de rifa de disco. Como de costumbre, veamos primero las representaciones:
Echemos un vistazo a varias de las principales API de Canvas:
Todos los códigos de origen son los siguientes:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> html5 lona de lata de discos aplicaciones de lotería demo </title> <meta name = "viewport" content = "width = width de dispositivo, inicial-scale = 1, usador de usuario = no" 0px; font-size: 16px; font-family: "Microsoft Yahei";}. Xttblog_box {ancho: 300px; altura: 300px; margen: 100px automático; posición: relativo; } .xttblog_box Canvas {posición: absoluto;}#xttblog {background-color: white; border-radio: 100%;}#xttblog01,#xttblog03 {izquierda: 50px; top: 50px; z-index: 30;}#xttblog02 {izquierda: 75px; 75px; 20;}#xttblog {-o-transform: transform 6s; -ms-transform: transform 6s; -Moz-Transform: transform 6s; -Webkit-transform: transform 6s; transición: transformar 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%;}. Taoge_Btnnn {width {width-origin: 60%; 60px; izquierda: 120px; arriba: 120px; border-radio: 100%; posición: absoluto; cursor: pointer; border: none; fondo: transparente; esquema: none; z-index: 40;} </style> <script type = "text/javascript" src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script> $ (documento) .Ready (function () {// Rotation Angle Var Angles; // Número de dibujos Var Var = 5; // Rottion Var Rotnum = 0; // Winning Angless de anuncio de anuncio; ["#626262", "#787878", "RGBA (0,0,0,0.5)", "#DCC722", "White", "#FF4350"]; Hard ',' yuan ',' yuan ',' monedas de oro ',' yuan ',' monedas de oro '] canvasrun (); El botón "Inicio Draw" no se puede hacer clic en $ ('#TUPBTN'). ATTR ("Desactivado", verdadero); alerta (querida, el número de dibujos se ha usado! "); $ ('#xttblog'). CSS ('-MS-Transform', degValue); $ ('#xttblog'). CSS ('transformar', degvalue); info [0] + info1 [0]; 2160 * Rotnum + 1935; else if (num == 5) {ángulos = 2160 * Rotnum + 2025; info [1] + info1 [1]; canvas02 = document.getElementById ('XttBlog02'); createCircle (); startange+math.pi*(1/4); CTX.STROKE (); CTX.BEGINPATH (); Yahei "; ctx.fillText (info1 [i],-30, -95,60); ctx.closePath (); ctx.restore ();}} function initpoint () {// puntero de flecha ctx1.beginpath (); ctx1.moveto (100,24); ctx1.linetO (90,62); CTX1.lineto (110,62); ctx3.fillstyle = color [5]; CTX3.FillText ('Inicio', 80,90,40); color [2]; El navegador no lo admite. </Canvas> <Canvas id = "Xttblog01"> ¡Lo siento! El navegador no lo admite. </Canvas> <Canvas id = "Xttblog03"> ¡Lo siento! El navegador no lo admite. </Canvas> <Canvas id = "Xttblog02"> ¡Lo siento! El navegador no lo admite. </Canvas> <Button id = "Tupbtn"> </boton> </div> <!-Cambie la ventana emergente predeterminada del sistema-> <script type = "text/javascript"> window.alert = function (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 =/" list-style: none; margen: 0px; relleno: 0px; ancho: 100%/">/n"; strhtml += "<li style =/" fondo: #626262; text-align: izquierda; padding-izquierda: 20px; font-size: 14px; font-weight: bold; altura: 25px; line-height: 25px; fronteriza: 1px sólido #f9cade; color: blanco/"> [ganar recordatorio] </li>/n"; strhtml+= "<li style =/" fondo: #787878; text-align: center; font-size: 12px; altura: 95px; línea de línea: 95px; border-left: 1px sólido #f9cade; border-right: 1px sencillo #f9cade; color: #dcc722/">"+str+"</li>/n"; strhtml += "<li style =/" fondo:#626262; text-align: Center; Font-Weight: Bold; Altura: 30px; Line-Hieight: 25px; border: 1px sólido #f9cade;/"> <input type =/" button/"value =/" ok/"onClick =/" dook ()/"style =/" ancho: 80px; altura: 20px; fondo: #626262; color: blanca; border: 1px sólido blanco; font-size: 14px; line-hheight: 20px; afuera: no; margen; margen; margen; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendChild (alertfram); document.body.appendChild (escudo); this.dook = function () {alertfram.style.display = "none"; Shield.style.display = "Ninguno"; } alertfram.focus (); document.body.onselectstart = function () {return false;};} </script> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.
Dirección original: http://www.xttblog.com/?p=399