Frequentemente participamos de várias atividades promocionais de comércio eletrônico, como a compra de uma certa quantia para conduzir atividades de loteria, como loteria WeChat, loteria do Taobao, atividades de loteria de BAO com Thunder Money Bao, etc. Esses sorteios são feitos parcialmente por telas HTML5. Hoje vou compartilhar com você como usar a tela HTML5 para criar uma função de sorteio de disco. Como sempre, vejamos as renderizações primeiro:
Vamos dar uma olhada em várias das principais APIs de tela:
Todos os códigos de origem são os seguintes:
<!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; font-tamanho: 16px; font-família: "Microsoft yahei";}. Xttblog_box {width: 300px; altura: 300px; margem: 100px Auto; posição: relativa; } .tttblog_box canvas {position: absoluto;}#xttblog {background-color: white; radio de borda: 100%;}#xttblog01,#xttblog03 {esquerda: 50px; top: 50px; z-index: 30;}####{esquerda; esquerda: 50px; z-index: 30;}#### 20;}#xttblog {-o-transform: transform 6s; -ms-transform: transform 6s; -moz-transform: transform 6s; -Webkit-Transform: Transform 6s; Transição: Transform 6s; -O-transform-origina: 50% 50%;-MS-transform-origin: 50% 50%;-MOZ-transform-origin: 50% 50%; 60px; esquerda: 120px; topo: 120px; Rádio de borda: 100%; Posição: Absoluto; Cursor: Ponteiro; Border: Nenhum; Antecedentes: Transparente; Esboço: Nenhum; Z-Index: 40;} </yled> <Script Type = "Text/JavaScript" src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <cript> $ (document) .ready (function () {// ângulo de rotação vars; color = ["#626262", "#787878", "RGBA (0,0,0,0,5)", "#dcc722", "branco"#ff4350 "] Trabalhe duro ',' yuan ',' yuan ',' moedas de ouro ',' yuan ',' moedas de ouro '] Canvasrun (); O botão Rotado Process "Iniciar" não pode ser clicado $ ('#tupbtn'). Att (desativado ", true); caso contrário, alerta ("Caro, o número de desenhos foi usado!"); $ ('#xttblog'). CSS ('-MS-Transform', DegValue); $ ('#xttblog'). CSS ('transformado', degValue); Info [0] + Info1 [0]; 2160 * Rotnum + 1935; caso contrário, se (NUM info [1] + info1 [1]; Canvas02 = Document.getElementById ('Xttblog02'); CreateCircle (); startangle+matemática.pi*(1/4); ctx.stroke (); Ctx.Translate (150,150); Yahei "; ctx.fillText (info1 [i],-30, -95,60); ctx.closePath (); ctx.restore ();}} função initPoint () {// seta ponteiro ctx1.beginpath (); ctlin; CTX1.LINETO (110,62); Ctx3.FillStyle = cor [5]; CTX3.FILLTEX (Start ', 80,90,40); cor [2]; O navegador não o suporta. </canvas> <canvas id = "xttblog01"> desculpe! O navegador não o suporta. </canvas> <canvas id = "xttblog03"> desculpe! O navegador não o suporta. </canvas> <canvas id = "xttblog02"> desculpe! O navegador não o suporta. </canvas> <botão id = "tupbtn"> </button> </div> <!-altere a janela pop-up padrão do 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 = "absoluto"; 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 = "<estilo ul =/" estilo de lista: nenhum; margem: 0px; preenchimento: 0px; largura: 100%/">/n"; strhtml += "<estilo li =/" Antecedentes: #626262; text-align: esquerda; preenchimento-esquerda: 20px; tamanho da fonte: 14px; peso da fonte: negrito; altura: 25px; altura da linha: 25px; borda: 1px #f9cade; cor/"White/"> [vencedor] [vencedor] </border; strhtml+= "<estilo li =/" Antecedentes: #787878; text-align: centro; tamanho da fonte: 12px; altura: 95px; altura da linha: 95px; borda-left: 1px sólido #f9cade; borda-direita: 1px sólido #f9cade; cor: #dcc722222222/">; strhtml += "<estilo li =/" Antecedentes:#626262; Text-align: Center; Fonte-peso: negrito; altura: 30px; altura da linha: 25px; borda de 1px sólido #f9cade;/"> <tipo de entrada =/" botão/"value =/" ok/"onclick =/" dook ()/"estilo =/" largura: 80px; altura: 20px; fundo: #626262; cor: branca; borda: 1px sólido branco; font-size: 14px; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendChild (alertfram); document.body.appendChild (Shield); this.dook = function () {alertfram.style.display = "nenhum"; shield.style.display = "nenhum"; } alertfram.focus (); document.body.OnselectStart = function () {return false;};} </sCript> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.
Endereço original: http://www.xttblog.com/?p=399