<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas">你的浏览器版本太低不支持HTML5</canvas> <script> function turnTable(R,r,length){ //这四行都是获取canvas环境的。 var canvas=document.getElementById("canvas"); canvas.width=2*R; canvas.height=2*R; var context=canvas.getContext("2d"); //这个是参数，很重要的参数。错了一个就死翘翘了。 // var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)] // var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)] //上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。 //translate是变换，把转盘移到中间。 context.translate(R,R) //绘制转盘路径并画出来。 for(var i=0;i<length;i++) { //设置每块的颜色。这个可以去掉，只是为了区分 var RIGOU=Math.round(Math.random()*255) var G=Math.round(Math.random()*255) var B=Math.round(Math.random()*255) var color="rgba("+RIGOU+","+G+","+B+",0.9)" //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。 var everyRad=(2*Math.PI)/length var rad=everyRad*i var nextRad=everyRad*(i+1) context.beginPath() //绘制路径。最难搞的东西。 context.lineTo(r*Math.cos(rad), r*Math.sin(rad)) context.lineTo(R*Math.cos(rad), R*Math.sin(rad)) context.arc(0, 0, R, rad, nextRad, false) context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad)) context.arc(0, 0, r, nextRad, rad, true) context.closePath() //填充路径颜色 context.fillStyle = color context.fill() } } //调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。 turnTable(300,80,10) </script> </body> </html>
上面的是转盘的代码。接下来这个是有空隙的转盘代码。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas">你的浏览器版本太低不支持HTML5</canvas> <script> function turnTable(R,r,length){ //这四行都是获取canvas环境的。 var canvas=document.getElementById("canvas"); canvas.width=2*R; canvas.height=2*R; var context=canvas.getContext("2d"); //这个是参数，很重要的参数。错了一个就死翘翘了。 // var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)] // var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)] //上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。 //translate是变换，把转盘移到中间。 context.translate(R,R) context.scale(0.5,0.5) //绘制转盘路径并画出来。 var flag=0 for(var i=0;i<length;i++) { //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。 var everyRad=(2*Math.PI-1)/length var rad=(everyRad)*i+0.1*flag flag++ var nextRad=(everyRad)*(i+1)+0.1*flag flag++ context.beginPath() //绘制路径。最难搞的东西。 context.moveTo(r*Math.cos(rad), r*Math.sin(rad)) context.lineTo(R*Math.cos(rad), R*Math.sin(rad)) //这里加了一个十分重要的参数！！！十分重要！！！0.058十分重要！！！ context.arc(0, 0, R, rad, nextRad+0.058, false) context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad)) context.arc(0, 0, r, nextRad, rad, true) context.closePath() //填充路径颜色 context.fillStyle = "#6AD16A" context.fill() } } //调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。 turnTable(200,80,5) </script> </body> </html>
最后的这个则是加了简单定时器实现抽奖的转盘代码。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" class="canvas">你的浏览器版本太低不支持HTML5</canvas> <a href="javascript:(void)" id="btn" style="display: block;position:absolute; left:260px;top:280px;font-size: 24px; background-color:#419641;opacity: 0.8;padding: 10px;color: #ffffff;text-decoration: none; ">点击抽奖</a> <script> function turnTable(R,r,length){ //这四行都是获取canvas环境的。 var canvas=document.getElementById("canvas"); canvas.width=2*R; canvas.height=2*R; var context=canvas.getContext("2d"); //这个是参数，很重要的参数。错了一个就死翘翘了。 // var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)] // var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)] //上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。 //translate是变换，把转盘移到中间。 context.translate(R,R) //绘制转盘路径并画出来。 for(var i=0;i<length;i++) { //设置每块的颜色。这个可以去掉，只是为了区分 var RIGOU=Math.round(Math.random()*255) var G=Math.round(Math.random()*255) var B=Math.round(Math.random()*255) var color="rgba("+RIGOU+","+G+","+B+",0.9)" //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。 var everyRad=(2*Math.PI)/length var rad=everyRad*i var nextRad=everyRad*(i+1) context.beginPath() //绘制路径。最难搞的东西。 context.lineTo(r*Math.cos(rad), r*Math.sin(rad)) context.lineTo(R*Math.cos(rad), R*Math.sin(rad)) context.arc(0, 0, R, rad, nextRad, false) context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad)) context.arc(0, 0, r, nextRad, rad, true) context.closePath() //填充路径颜色 context.fillStyle = color context.fill() } } //调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。 turnTable(300,80,8) var btn=document.getElementById("btn") btn.onclick=function(){ var lowSpeed=20 var temp=0 var timer=null timer=setInterval(function(){ temp+=Math.random()*20+15 canvas.style.transform="rotate("+temp+"deg)" },30) setTimeout(function(){ clearInterval(timer) timer=setInterval(function(){ if(lowSpeed>0) { lowSpeed-=0.5 temp += lowSpeed canvas.style.transform = "rotate(" + temp + "deg)" } else{ clearInterval(timer) } },30) },1000) } </script> </body> </html>