Os exemplos deste artigo compartilham o código específico da loteria da toca -giragem JS para sua referência. O conteúdo específico é o seguinte
1. Efeitos básicos alcançados
2. Conteúdo principal
• Uso de tags de tela em html5
• plugin de rotação jQueryrotate.js
3. Código HTML principal
<body> <div> <div> <canvas id = "wheelcanvas"> </canvas> <img src = "imagens/wheel-pointer.png"/> </div> </div> <div> <span id = "tip"> jason </span> </div> </body> </tsl = tip "> jason </span> </div> </body> </html>
4. Código CSS principal
.Content {Display: Block; largura: 95%; margem: 30px Auto;}. Conteúdo .WHEEL {Display: Block; largura: 100%; Posição: relativa; Imagem de fundo: URL (../ imagens/wheel-bg.png); Antecedentes-size: 100%100%;}. Content. Wheel Canvas.iTem {Width: 100%;}. Content .Wheel img.Pointer {Position: Absolute; Largura: 31,5%; Altura: 42,5%; Esquerda: 34,6%; TOP: 23%;}. Dicas {Text-Align: Center; margem: 20px 0; Fonte: Normal 24px 'Microsoft Yahei';}5. Código JS central
/ * * Renderização giration * */função drawweelCanvas () {// Obtenha a prancha de arte, equivalente à camada? ? var Canvas = document.getElementById ("WheelCanvas"); // var Canvas = ($ ("#WheelCanvas")). get () [0]; // Observe que o jQuery recebe um objeto embrulhado, não um objeto DOM e pode ser convertido // calcular o ângulo ocupado por cada bloco, sistema radian var Baseangle = math.pi * 2 / (turnwheel.rewardNames.length); // obtenha o contexto var ctx = canvas.getContext ("2d"); var Canvasw = Canvas.width; // altura da prancha de arte var Canvash = Canvas.Height; // largura da prancha de arte // Limpe um retângulo no retângulo dado ctx.clearrect (0,0, canvasw, canvash); // Strokestyle desenhe a cor ctx.strokestyle = "#ffbe04"; // Red // Fonte ATRIBUIÇÃO ATUAL DE FONTE DO TEXTO DE TEXTO NO LOVAS CTX.FONT = '16PX Microsoft yahei'; // Observe que a posição inicial é desenhada do ângulo de 0 °. Isto é, a direção horizontalmente para a direita. // desenha conteúdo específico para (var index = 0; index <turnwheel.rewardNames.length; index ++) {// ângulo de corrente var angle = turn wheel.startange+index * BaseAngle; // preencher color ctx.fillstyle = turnwheel.colors [index]; // Comece a desenhar conteúdo // ----------------------------- ctx.beginpath (); /** Desenhe arcos, semelhante ao quartz2d no iOS* context.arc (x, y, r, sangle, eangle, no sentido anti -horário); * x: o ponto central do círculo x * y: o ponto central do círculo x * cedado, eangle: ângulo inicial, ângulo final * no sentido anti -horário: desenhe direção, opcional, false = horário horário, true = no sentido anti -horário * */ ctx.arc (canvasw * 0.5, canvash * 0,5, tira de volta.outsideradius, angule, anlagsw * 0.5, canish * 0,5, whewheel.outsideradius; ctx.arc (Canvasw * 0.5, Canvash * 0.5, turnwheel.insideradius, ângulo + basaleangle, verdadeiro); ctx.stroke (); ctx.fill (); // Salve o estado da tela, semelhante à pilha de contexto gráfico. Você pode restaurar o estado posteriormente (as coordenadas são restauradas no atual 0, 0), ctx.save (); /*---- Desenhe o conteúdo do prêmio --------*/ // Red Font Ctx.fillstyle = "#e5302f"; var recompenseName = turnwheel.rewardNames [index]; var linha_height = 17; // Traduzir o remapeamento do método (0,0) na tela // context.translate (x, y); // Consulte a imagem ppt, var tradlatex = canvasw * 0.5 + math.cos (ângulo + BaseAngle / 2) * turnwheel.textradius; var tradutory = canvash * 0.5 + Math.sin (ângulo + Baseangle / 2) * Turnwheel.textradius; ctx.Translate (TradlateX, tradutor); // O método girado gira o desenho atual porque o texto é adequado para a linha central do setor atual perpendicular! // ângulo, o ângulo de rotação de corrente do próprio ventilador + BaseAngle / 2 O ângulo da linha central é girado + o ângulo vertical 90 ° ctx.rotate (ângulo + baseAngle / 2 + math.pi / 2); /** O código a seguir produz diferentes efeitos de acordo com o tipo de prêmio e o comprimento do nome do prêmio, como fontes, cor e efeitos de imagem. (Altere especificamente de acordo com a situação real) **/ // O método medireText () de tela retorna um objeto que contém a largura da fonte especificada em pixels. // FILLTEXT () Método desenha texto preenchido na tela. A cor padrão do texto é preta. A propriedade FillStyle renderiza o texto com outra cor/gradiente/ * * context.fillText (texto, x, y, maxwidth); * Observação! ! ! y é o valor inferior do texto, não o valor superior! ! ! * */if (recompensaname.indexOF ("m")> 0) {// Query se os pacotes de tráfego de campo estão contidos var recompenseNames = recompensaName.split ("m"); for (var j = 0; j <recompensa.length; j ++) {ctx.font = (j == 0)? 'Bold 20px Microsoft yahei': '16px Microsoft yahei'; if (j == 0) {ctx.fillText (recompensa [j]+"m", -ctx.measureText (recompensa [j]+"m"). width / 2, j * line_height); } else {ctx.fillText (recompensa [j], -ctx.measureText (recompensa [j]). width / 2, j * line_height); }}} else if (recompense.indexof ("m") == -1 && recompensa.length> 6) {// O comprimento do nome do prêmio excede um determinado intervalo recompensarname = recompensa.substring (0,6)+"||"+recompensa.substring (6); var recompenseNames = recompensaName.split ("||"); for (var j = 0; j <recompensa.length; j ++) {ctx.fillText (recompensa [j], -ctx.measureText (recompensa [j]). width / 2, j * line_height); }} else {// desenhe o texto colorido na tela. A cor padrão do texto é preto ctx.fillText (recompensa, -ctx.measureText (recompensa) .width / 2, 0); } // Adicione o ícone correspondente se (recompensaName.IndexOF ("qcoin")> 0) {// Observe que você deve esperar até que o carregamento do IMG seja concluído antes que o IMG possa desenhar imgqb.onload = function () {ctx.drawimage (imgqb, -15,10); }; ctx.Drawimage (IMGQB, -15,10); } else if (recompensaName.IndexOF ("Obrigado por participar")> = 0) {imgsorry.onload = function () {ctx.drawimage (imgsorry, -15,10); }; ctx.drawimage (imgsorry, -15,10); } // RESTORE () Antes de restaurar o estado da prancha de arte para o salvamento anterior () estadual ctx.restore (); /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------afinal
Essa coisa é quase a mesma que a tecnologia Quartz2d em iOS ...
Código detalhado >>>> Clique para baixar
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.