Los ejemplos en este artículo comparten el código específico de la lotería JS Turntable para su referencia. El contenido específico es el siguiente
1. Efectos básicos logrados
2. Contenido principal
• Uso de etiquetas de lienzo en HTML5
• complemento de rotación jQueryRotate.js
3. Código HTML principal
<Body> <Viv> <Viv> <Canvas id = "WheelCanvas"> </ Canvas> <img src = "Images/Wheel-Pointer.png"/> </div> </div> <div> <span id = "tip"> jason </span> </div> </body> </html>
4. Código CSS principal
.content {display: block; Ancho: 95%; margen: 30px auto;}. contenido .Wheel {display: block; Ancho: 100%; Posición: relativo; Background-Image: URL (../ Images/Wheel-Bg.png); tamaño de fondo: 100%100%;}. Contenido .Wheel Canvas.Item {ancho: 100%;}. Content .Wheel img.pointer {posición: absoluto; Ancho: 31.5%; Altura: 42.5%; Izquierda: 34.6%; arriba: 23%;}. Tips {text-align: Center; margen: 20px 0; FUENT: Normal 24px 'Microsoft Yahei';}5. Código Core JS
/ * * Rendering Turntable * */function drawwheelCanvas () {// ¿Obtener el tablero de lienzo, equivalente a la capa? ? var canvas = document.getElementById ("WheelCanvas"); // var Canvas = ($ ("#WheelCanvas")). get () [0]; // Tenga en cuenta que jQuery obtiene un objeto envuelto, no un objeto DOM, y se puede convertir // Calcule el ángulo ocupado por cada bloque, el sistema radiano var BaseAngle = Math.pi * 2 / (gira.rewardnames.length); // Obtener el contexto var ctx = Canvas.getContext ("2d"); var canvasw = canvas.width; // Altura del Artboard Var Canvash = Canvas.Height; // Ancho de la tabla de arte // Borrar un rectángulo en el rectángulo dado CTX.ClearRect (0,0, Canvasw, Canvash); // Strokestyle Dibuja el color ctx.strokestyle = "#ffbe04"; // Red // Fuente Atributo de fuente actual del contenido de texto en el lienzo ctx.font = '16px Microsoft Yahei'; // Tenga en cuenta que la posición inicial se extrae desde el ángulo de 0 °. Es decir, la dirección horizontalmente a la derecha. // Dibuja contenido específico para (VAR index = 0; index <gurnwheel.rewardnames.length; index ++) {// cotent angle var ángulo = gurnwheel.startangle+index * baseangle; // llenar color ctx.fillstyle = Turnwheel.colors [index]; // comienza a dibujar contenido // ------------------------------- CTX.BEGINPATH (); /** Dibuje arcos, similares a cuarzo2d en iOS* context.arc (x, y, r, sangle, eangle, en sentido antihorario); * x: el punto central del círculo x * y: el punto central del círculo x * sangle, eangle: ángulo de inicio, ángulo final * en sentido antihorario: dibujar dirección, opcional, falso = en sentido horario, true = en sentido contrario * * */ ctx.arc (Canvasw * 0.5, Canvash * 0.5, Turnwheel.outsideradius, ángulo, ángulo, ángulo + basangle, falso); CTX.ARC (Canvasw * 0.5, Canvash * 0.5, gira. ctx.stroke (); ctx.fill (); // Guardar el estado del lienzo, similar a la pila de contexto gráfico. Puede restaurar el estado más adelante (las coordenadas se restauran a la actual 0, 0), ctx.save (); /*---- Dibuja el contenido del premio --------*/ // Font Red Ctx.FillStyle = "#E5302F"; var recompensas Name = Turnwheel.RewardNames [índice]; var line_height = 17; // Traduce la posición de reasta de método (0,0) en el lienzo // context.translate (x, y); // Ver imagen PPT, var traduceX = Canvasw * 0.5 + Math.cos (ángulo + BaseAngle / 2) * Turnwheel.textradius; var traducey = Canvash * 0.5 + Math.sin (ángulo + BaseAngle / 2) * Turn Wheel.textradius; ctx.translate (traduceX, traducey); // El método de rotación gira el dibujo actual porque el texto es adecuado para la línea central del sector actual perpendicular. // Ángulo, el ángulo de rotación actual del ventilador en sí + BaseAngle / 2 El ángulo de la línea central es múltiple + ángulo vertical 90 ° CTX.rotate (ángulo + BaseAngle / 2 + Math.Pi / 2); /** El siguiente código hace diferentes efectos de acuerdo con el tipo de premio y la longitud del nombre del premio, como la fuente, el color y los efectos de imagen. (Cambie específicamente de acuerdo con la situación real) **/ // El método MidureText () de Canvas Devuelve un objeto que contiene el ancho de fuente especificado en píxeles. // Método FillText () dibuja texto relleno en el lienzo. El color predeterminado del texto es negro. La propiedad FillStyle hace que el texto con otro color/gradiente/ * * context.fillText (Text, X, Y, MaxWidth); * ¡Nota! ! ! Y es el valor inferior del texto, ¡no el valor superior! ! ! * */if (recompensarname.indexof ("m")> 0) {// consulta si los paquetes de tráfico de campo están contenidos var recompensarnames = recompensas.split ("m"); for (var j = 0; j <recompensarnames.length; j ++) {ctx.font = (j == 0)? 'Bold 20px Microsoft Yahei': '16px Microsoft Yahei'; if (j == 0) {ctx.fillText (recompensa [j]+"m", -ctx.measuretext (recompensa Names [j]+"m"). width / 2, j * line_height); } else {ctx.fillText (recompensas [j], -ctx.MeasurEtext (recompensas Names [j]). Ancho / 2, j * line_height); }}} else if (recompensar.indexof ("m") == -1 && recompensar.length> 6) {// La longitud del nombre del premio excede un cierto rango de recompensas = recompensas.substring (0,6)+"||"+recompensa.substring (6); var recompensaNames = recompensas Name.split ("||"); for (var j = 0; j <recompensarnames.length; j ++) {ctx.fillText (recompensas Names [j], -ctx.MeasurEtext (recompensas [j]). ancho / 2, j * line_height); }} else {// Dibuja el texto coloreado en el lienzo. El color predeterminado del texto es Black CTX.FillText (recompensa, -ctx.MeasurEtext (recompensa Name) .Width / 2, 0); } // Agregue el icono correspondiente if (recompensaName.IndexOf ("QCOin")> 0) {// Tenga en cuenta que debe esperar hasta que se complete la carga IMG antes de que IMG pueda dibujar imgqb.onload = function () {ctx.drawImage (imgqb, -15,10); }; CTX.DrawImage (IMGQB, -15,10); } else if (recompensaName.Indexof ("Gracias por participar")> = 0) {imgsorry.onload = function () {ctx.drawimage (imgsorry, -15,10); }; CTX.DrawImage (imgsorry, -15,10); } // restaurar () antes de restaurar la tabla de estado del arto al estado de guardado anterior () state ctx.restore (); /*---------------------------------------------------------------------------------------------------------------por fin
Esta cosa es casi lo mismo que la tecnología Quartz2d en iOS ...
Código detallado >>>> Haga clic para descargar
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.