Mobile mobile end to achieve jquery and HTML5 Canvas Lucky Jackpot Disk Special effects _jquery

HTML5 Canvas's Lucky prize disc special effects

Now good micro-credit micro-business or micro-letter public number have such a big turntable project, here to organize one, you can refer to the next.

This is a lucky jackpot based on jquery and HTML5 canvas. The Lucky big prize special effect supports the mobile end, which generates jackpot disks by dynamically constructing canvas elements and randomly obtains prizes through jquery code.

　How to use

HTML structure

The large turntable used in the lottery is made with pictures, and they are hidden at the beginning. The entire lottery jackpot is placed in a container, which controls the size of the prize disc.

xml/html code
<div class= "container" >  
  <div class= "banner 
 " > 
  <div class= "Turnplate" style= "Background-image:url (images/turnplate-bg.png); background-size:100% 100%;" > 
   <canvas class= "item" id= "Wheelcanvas" width= "422px" height= "422px" ></canvas> 
    
  </div> 
 </div> 
</div> 

CSS Styles

Add the following CSS style to the jackpot:

CSS Code

. banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom:20px; 
Banner. turnplate{display:block;width:100%;p osition:relative; 
Banner. Turnplate canvas.item{width:100%;} 

Javascript

The jquery implementation code for the entire jackpot disk is as follows:

JavaScript code

var turnplate={restaraunts:[],//Large turntable trophy name colors:[],///large turntable trophy block corresponding to background color outsideradius:192,//large turntable outer circle radius t extradius:155,///large turntable prize position distance from the center of the Circle insideradius:68,//The radius of the circle of the large turntable startangle:0,//Start angle brotate:false// 
  
False: Stop; ture: rotate}; $ (document). Ready (function () {//dynamic Add the prizes and prizes of the large turntable area background color turnplate.restaraunts = [50M free flow pack, 10 gold coins, thank you for participating, "5 gold coins," 10M free 
 Flow Pack ", 20M free Flow Package", "20 gold Coins", "30M free Flow Package", "100M free Flow Package", "2 gold coins"]; Turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "" 
  
   
 FFFFFF "]; var rotatetimeout = function () {$ (' #wheelcanvas '). Rotate ({angle:0, animateto:2160, duration:8000, Cal Lback:function () {alert (' Network timeout, please check your network settings! 
   '); 
 } 
  }); 
  
 }; Rotating Turntable Item: prize position; 
 TXT: hint language; var rotatefn = function (item, TXT) {var angles = Item * (360/turnplate.restaraunts.length)-(360/(Turnplate.resta 
  raunts.length*2)); if (angles<270) {angles = 270-angLes 
  }else{angles = 360-angles + 270; 
  $ (' #wheelcanvas '). Stoprotate (); $ (' #wheelcanvas '). Rotate ({angle:0, animateto:angles+1800, duration:8000, Callback:function () {alert 
    (TXT); 
   Turnplate.brotate =!turnplate.brotate; 
 } 
  }); 
  
 }; 
  $ ('. pointer '). Click (function () {if (turnplate.brotate) return; 
  Turnplate.brotate =!turnplate.brotate; 
  Get random number (range of prizes) var item = rnd (1,turnplate.restaraunts.length); The number of prizes is equal to 10, the pointer falls on the center of the trophy area [252, 216, 180, 144, 108, MB, 360, 324,] Rotatefn (item, TURNPLATE.RESTARAUNTS[ITEM-1) 
 ); 
}); 
  
}); 
 function rnd (n, m) {var random = Math.floor (Math.random () * (m-n+1) +n); 
   
return random; 
The Drawroulettewheel () method is used to render the turntable window.onload=function () {Drawroulettewheel ()) After all elements of the page have been loaded. 
  
};   
 function Drawroulettewheel () {var canvas = document.getElementById ("Wheelcanvas"); if (canvas.getcontext) {//According to the number of prizes calculate the circumference angle var arc = Math.PI/(Turnplate.restaraunts.lenGTH/2); 
  var ctx = Canvas.getcontext ("2d"); 
  Clears a rectangular ctx.clearrect (0,0,422,422) within a given rectangle; 
  Strokestyle property to set or return the color, gradient, or pattern used for strokes Ctx.strokestyle = "#FFBE04";    
  The Font property sets or returns the current font properties of the text content on the canvas Ctx.font = ' 16px Microsoft yahei '; 
   for (var i = 0; i < turnplate.restaraunts.length i++) {var angle = turnplate.startangle + i * ARC; 
   Ctx.fillstyle = Turnplate.colors[i]; 
   Ctx.beginpath ();    
   Arc (x,y,r, starting angle, ending angle, drawing direction) method creates arcs/curves (used to create round or partial circles) Ctx.arc (211, 211, Turnplate.outsideradius, angle, angle + arc, false); 
   Ctx.arc (211, 211, Turnplate.insideradius, angle + arc, angle, true);  
   Ctx.stroke (); 
   Ctx.fill ();   
     
   Lock the canvas (in order to save the previous canvas state) Ctx.save (); 
   ----Draw the prize----Ctx.fillstyle = "#E5302F"; 
   var text = Turnplate.restaraunts[i]; 
   var line_height = 17; The Translate method remap (0,0) position on the canvas ctx.translate (211 + math.cos (angle + arc/2) * Turnplate.textradius, 211 + Math.sin (an 
     
   GLE + ARC/2) * Turnplate.textradius); RotaThe Te method rotates the current drawing ctx.rotate (angle + ARC/2 + MATH.PI/2); /** The following code renders different effects according to the type of prize, the length of the prize name, such as font, color, and picture effects. 
    (Specific according to actual situation change) **/if (Text.indexof ("M") >0) {//traffic packet var texts = Text.split ("M"); for (var j = 0; j<texts.length; j + +) {Ctx.font = J = = 0? 
     Bold 20px Microsoft Yahei ': ' 16px Microsoft Yahei '; 
     if (j = = 0) {ctx.filltext (texts[j]+ "M",-ctx.measuretext (texts[j]+ "M"). WIDTH/2, J * line_height); 
     }else{Ctx.filltext (Texts[j],-ctx.measuretext (TEXTS[J)). WIDTH/2, J * line_height); }}else if (Text.indexof ("M") = =-1 && text.length>6) {//prize name length exceeds a certain range text = text.substring (0,6) +"||" 
    +text.substring (6); 
    var texts = text.split ("| |"); for (var j = 0; j<texts.length; j + +) {Ctx.filltext (texts[j],-ctx.measuretext (TEXTS[J)). WIDTH/2, J * Line_height 
    ); }else{//Draws the fill text on the canvas. The default color for text is the Black//measuretext () method returns an object that contains the specified font width in pixels ctx.filltext (text,-ctx.measuretext (text). WIDTH/2, 0); 
    ///Add corresponding icon if (Text.indexof ("Gold coin") >0) {var img= document.getelementbyid ("shan-img");    
    Img.onload=function () {ctx.drawimage (img,-15,10);  
    };  
   Ctx.drawimage (img,-15,10); 
    }else if (text.indexof ("Thank You for Participation") >=0) {var img= document.getelementbyid ("sorry-img");    
    Img.onload=function () {ctx.drawimage (img,-15,10);  
    };  
   Ctx.drawimage (img,-15,10); 
   ///Ctx.restore () before returning the current canvas to the previous save () state;        
 ----Draw the prize end----}}

To implement the effect diagram:

Thank you for reading, I hope to help you, thank you for your support for this site!