The example of this article for everyone to share the specific code of JS turntable lottery, for your reference, the specific content as follows
1. Basic effects of implementation
2. The main elements
The use of Canvas label in HTML5
Jqueryrotate.js Rotary Plugin
3. Main HTML code
<body>
<div class= "Content" >
<div class= "Wheel" >
<canvas class= "Item" id= " Wheelcanvas "width=" 422px "height=" 422px "></canvas>
</div>
</div>
<div class=" Tips ">
<span id=" Tip "> jason</span>
</div>
</body>
4. The main CSS code
. content{
Display:block;
width:95%;
margin:30px Auto;
Content. wheel{
Display:block;
width:100%;
position:relative;
Background-image:url (.. /images/wheel-bg.png);
background-size:100% 100%
}
. Content. Wheel canvas.item{
width:100%;
Content. Wheel img.pointer{
Position:absolute;
width:31.5%;
height:42.5%;
left:34.6%;
top:23%
}
. tips{
Text-align:center;
margin:20px 0;
Font:normal 24px ' MicroSoft Yahei ';
}
5. Core JS Code
* * * Render turntable */function Drawwheelcanvas () {//Get canvas artboard, equivalent to layer??
var canvas = document.getElementById ("Wheelcanvas"); var canvas = ($ ("#wheelCanvas")). get () [0];
Notice that jquery gets the wrapped object, not the DOM object, can convert//calculate the angle of each block, radians var baseangle = Math.PI * 2/(turnWheel.rewardNames.length);
Gets the context Var ctx=canvas.getcontext ("2d"); var canvasw = canvas.width; The height of the artboard var canvash = canvas.height;
The width of the artboard//empty a rectangular ctx.clearrect (0,0,canvasw,canvash) within a given rectangle; Strokestyle Draw the color Ctx.strokestyle = "#FFBE04";
The current font properties of the text content on the red//font canvas Ctx.font = ' 16px Microsoft yahei '; Note that the starting position is drawn from the position of the 0° angle.
Which is the horizontal right direction. Draw the specific content for (var index = 0; index < turnWheel.rewardNames.length; index++) {//current angle var angle = turnwhe
El.startangle + index * BASEANGLE;
Fill Color ctx.fillstyle = Turnwheel.colors[index];
Start drawing content//---------basic background Color----------ctx.beginpath (); * * Draw arcs, similar to iOS quartz2d * CONTEXT.ARC (X,y,r,sangle,eangle,counTerclockwise);
* x: The center point of the Circle X * y: The center point of the Circle X * Sangle,eangle: Starting angle, ending angle * counterclockwise: Drawing direction, optional, False = clockwise, true = Counterclockwise
* * */CTX.ARC (CANVASW * 0.5, Canvash * 0.5, Turnwheel.outsideradius, angle, Angle + baseangle, false);
CTX.ARC (CANVASW * 0.5, Canvash * 0.5, Turnwheel.insideradius, angle + baseangle, angle, true);
Ctx.stroke ();
Ctx.fill ();
Saves the state of the canvas, similar to the graphics context stack, after which you can restore the restored state (coordinates to the current 0,0), Ctx.save ();
* *----Draw the prize content----key----///Red font ctx.fillstyle = "#E5302F";
var rewardname = Turnwheel.rewardnames[index];
var line_height = 17;
The Translate method remap the (0,0) position on the canvas//Context.translate (x,y);
See ppt picture, var Translatex = CANVASW * 0.5 + math.cos (angle + baseangle/2) * Turnwheel.textradius;
var Translatey = Canvash * 0.5 + math.sin (angle + baseangle/2) * Turnwheel.textradius;
Ctx.translate (Translatex,translatey);
The Rotate method rotates the current drawing because the text fits the current fan centerline vertically! Angle, current fan rotation angle + BASEANGLE/2 center line multi-spinTurning angle + vertical angle 90°ctx.rotate (angle + BASEANGLE/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.
(change according to actual situation) **///Canvas's Measuretext () method returns an object that contains the specified font width in pixels. The Filltext () method draws the filled text on the canvas. The default color for text is black.
The FillStyle property renders text with another color/gradient: * * Context.filltext (text,x,y,maxwidth); * Pay attention to!!!
Y is the bottom value of the text, not the top value!!!
* */if (Rewardname.indexof ("M") >0) {//Query contains field traffic packet var rewardnames = Rewardname.split ("M"); for (var j = 0; j<rewardnames.length; j + +) {Ctx.font = (j = = 0)?
Bold 20px Microsoft Yahei ': ' 16px Microsoft Yahei ';
if (j = = 0) {ctx.filltext (rewardnames[j]+ "M",-ctx.measuretext (rewardnames[j]+ "M"). WIDTH/2, J * line_height);
}else{Ctx.filltext (Rewardnames[j],-ctx.measuretext (REWARDNAMES[J)). WIDTH/2, J * line_height); }}else if (Rewardname.indexof ("M") = =-1 && rewardname.length>6) {//prize name length exceeds a certain range rewardname = Rewardname.substring (0,6) + "| |" +rewardName.substring (6);
var rewardnames = rewardname.split ("| |"); for (var j = 0; j<rewardnames.length; j + +) {Ctx.filltext (rewardnames[j],-ctx.measuretext (REWARDNAMES[J)). Width
/2, J * line_height); }else{//Draws the fill text on the canvas.
The default color for text is black Ctx.filltext (Rewardname,-ctx.measuretext (rewardname). WIDTH/2, 0);
///Add corresponding icon if (Rewardname.indexof ("Q-Coin") >0) {//Note that this is not possible until the IMG load is complete to draw the Imgqb.onload=function () {
Ctx.drawimage (imgqb,-15,10);
};
Ctx.drawimage (imgqb,-15,10);
}else if (rewardname.indexof ("Thank You for Participation") >=0) {imgsorry.onload=function () {ctx.drawimage (imgsorry,-15,10);
};
Ctx.drawimage (imgsorry,-15,10);
}//Restore the status of the artboard to the previous save () state ctx.restore ();
/*----Draw the end of the prize----*}}
At last
This thing is almost the same as the quartz2d technology in iOS ....
Detailed code >>>> click to download
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
