The examples in this article share the specific code of the js turntable lottery for your reference. The specific content is as follows
1. Basic effects achieved
2. Main content
•Usage of canvas tags in html5
•jQueryRotate.js rotation plugin
3. Main html code
<body> <div> <div> <canvas id="wheelCanvas"></canvas> <img src="images/wheel-pointer.png"/> </div> </div> <div > <span id="tip">jason</span> </div></body></html>
4. 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
/* * Rendering turntable* */function drawWheelCanvas(){ // Get the canvas artboard, equivalent to layer? ? var canvas = document.getElementById("wheelCanvas");// var canvas = ($("#wheelCanvas")).get()[0]; // Note that jQuery gets a wrapped object, not a DOM object, and can be converted // Calculate the angle occupied by each block, radian system var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length); // Get the context var ctx=canvas.getContext("2d"); var canvasW = canvas.width; // Height of the artboard var canvasH = canvas.height; // Width of the artboard // Clear a rectangle in the given rectangle ctx.clearRect(0,0,canvasW,canvasH); //strokeStyle Draw the color ctx.strokeStyle = "#FFBE04"; // Red //font Current font attribute of the text content on the canvas ctx.font = '16px Microsoft YaHei'; // Note that the starting position is drawn from the 0° angle. That is, the direction horizontally to the right. // Draw specific content for(var index = 0 ; index < turnWheel.rewardNames.length ; index++) { // Current angle var angle = turnWheel.startAngle + index * baseAngle; // Fill color ctx.fillStyle = turnWheel.colors[index]; // Start drawing content// ------------------------------- ctx.beginPath(); /* * Draw arcs, similar to Quartz2D in IOS* 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 : Start angle, end angle* counterclockwise : Draw 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, true); ctx.stroke(); ctx.fill(); //Save the state of the canvas, similar to the graphic context stack. You can restore the state later (coordinates are restored to the current 0, 0), ctx.save(); /*----Draw the prize content--------*/ // Red font ctx.fillStyle = "#E5302F"; var rewardName = turnWheel.rewardNames[index]; var line_height = 17; // translate method remap (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 is suitable for the current sector centerline perpendicular! // angle, the current rotation angle of the fan itself + baseAngle / 2 The angle of the center line is rotated + the vertical angle 90° ctx.rotate(angle + baseAngle / 2 + Math.PI / 2); /** The following code renders different effects according to the prize type and prize name length, such as font, color, and picture effects. (Specifically change according to actual situation) **/ // The measureText() method of canvas returns an object containing the specified font width in pixels. // fillText() method draws filled text on the canvas. The default color of text is black. The fillStyle property renders text with another color/gradient/* * context.fillText(text,x,y,maxWidth); * Note! ! ! y is the bottom value of the text, not the top value! ! ! * */ if(rewardName.indexOf("M")>0){//Query whether the field traffic packets are contained 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){//The length of the prize name 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{ //Draw the colored text on the canvas. The default color of the text is black ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0); } //Add the corresponding icon if(rewardName.indexOf("Qcoin")>0){ // Note that you have to wait until img loading is completed before img can draw imgQb.onload=function(){ ctx.drawImage(imgQb,-15,10); }; ctx.drawImage(imgQb,-15,10); }else if(rewardName.indexOf("Thank you for participating")>=0){ imgSorry.onload=function(){ ctx.drawImage(imgSorry,-15,10); }; ctx.drawImage(imgSorry,-15,10); } //Restore() before restoring the state of the artboard to the previous save() state ctx.restore(); /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------at last
This thing is almost the same as the Quartz2D technology in IOS...
Detailed code >>>>Click to download
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.