如何绘制抽奖转盘html,利用canvas实现抽奖转盘

之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。

功能需求 转盘要美观，转动效果流畅。 转盘上需要显示奖品图片，并且奖品是后台读取的照片和名字。 转动动画完成后要有相应提示。 获取的奖品具体算法在数据库里操作，前端只提供最后的效果展示。   知识要点 引用了一个jq插件：awardRotate，用来实现更智能化的转动(插件下载：http://www.jqcool.net/jquery-jqueryrotate.html)。 使用canvas标签和对应的html5 api 进行操作。(canvas中文手册可以查看http://javascript.ruanyifeng.com/htmlapi/canvas.html   正文 引用大转盘样式

1 .lunck_draw_wrap{display:block;width:95%;margin-right:auto;}

2 .lunck_draw_wrap .turnplate{display:block;width:106%; position:relative;}

3 .lunck_draw_wrap .turnplate canvas.item{left:1px;

4 position: relative;

5 top:9px;

6 width:100%;}

7 .lunck_draw_wrap .turnplate img.pointer{ height:37.5%;

8 left:34.6%;

9 position: absolute;

10 top:30%;

11 width:31.5%;}

转盘插件所需参数：

1 var turnplate ={

2 restaraunts:[],//大转盘奖品名称

3 lucky:[],//奖品内容

4 colors:[],//大转盘奖品区块对应背景颜色

5 goodsimgArr:[],//奖品图片页面标签

6 outsideRadius:175,//大转盘外圆的半径

7 textRadius:140,//大转盘奖品位置距离圆心的距离

8 insideRadius:65,//大转盘内圆的半径

9 startAngle:0,//开始角度

10 bRotate:false//false:停止;ture:旋转

11 };

由参数可知，我们需要从服务端获取相应的奖品名称，奖品内容，奖品图片页面标签等信息，再对大转盘进行渲染。 所以我们的第一步操作就是向服务端发送请求获取对应的奖品信息，并且遍历到生成大转盘所需的数组参数里：

1 $.each(data.list,function(key, value){

2 turnplate.restaraunts.push(value.data0);

3 turnplate.lucky.push(value.data1);

4 turnplate.goodsimgArr.push(getLuckyImg + value.data4);

5 if(key %2==0)

6 turnplate.colors.push('#fff');

7 else

8 turnplate.colors.push('#5fcbd4');

9 })

data.list是我获取来的奖品json数据：

1 [

2 {

3 'data0':'一等奖',

4 'data1':'iphone6s',

5 'data2':'0',

6 'data3':'0',

7 'data4':'201510161406303384.png',

8 'data5':'XXXX网络科技',

9 'data6':'浙江省衢州市柯城区XXXXX',

10 'data7':'0570-XXXXXX'

11 },......

12 ]

由于客户要求奖品没有“谢谢参与”，所以最低奖品也为“优胜奖”，所以在遍历奖品之后，插入有关“优胜奖”的渲染描述即可：

1 turnplate.goodsimgArr.push('../images/hongbao.png')

2 turnplate.restaraunts.push('优胜奖');

3 turnplate.colors.push('#5fcbd4');

4 //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染

5 preloadimages(turnplate.goodsimgArr).done(function(images){

6 drawRouletteWheel();

7 });

因为图片加载需要时间，而使用canvas复制图片需要图片加载完成后才能绘制，所以我使用了preloadimages，让所有奖品图片都加载完毕后进行大转盘的渲染工作：

1 //对奖品图片预加载

2 function preloadimages(arr){

3 var newimages =[], loadedimages =0

4 var postaction =function(){}//此处增加了一个postaction函数

5 var arr =(typeof arr !='object')?[arr]: arr

6 function imageloadpost(){

7 loadedimages++

8 if(loadedimages == arr.length){

9 postaction(newimages)//加载完成用我们调用postaction函数并将newimages数组做为参数传递进去

10 }

11 }

12 for(var i =0; i < arr.length; i++){

13 newimages[i]=newImage()

14 newimages[i].src = arr[i]

15 newimages[i].onload =function(){

16 imageloadpost()

17 }

18 newimages[i].onerror =function(){

19 imageloadpost()

20 }

21 }

22 return{//此处返回一个空白对象的done方法

23 done:function(f){

24 postaction = f || postaction

25 }

26 }

27 }

绘制转盘代码：

1 function drawRouletteWheel(){

2 var canvas = document.getElementById('wheelcanvas');

3 if(canvas.getContext){

4 //根据奖品个数计算圆周角度

5 var arc =Math.PI /(turnplate.restaraunts.length /2);

6 var ctx = canvas.getContext('2d');

7 //在给定矩形内清空一个矩形

8 ctx.clearRect(0,0,422,422);

9 //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式

10 ctx.strokeStyle ='rgba(0,0,0,0)';

11 //font 属性设置或返回画布上文本内容的当前字体属性

12 ctx.font ='bold 18px Microsoft YaHei';

13 for(var i =0; i < turnplate.restaraunts.length; i++){

14 //根据当前奖品索引 计算绘制的扇形开始弧度

15 var angle = turnplate.startAngle + i * arc;

16 //根据奖品参数 绘制扇形填充颜色

17 ctx.fillStyle = turnplate.colors[i];

18 //开始绘制扇形

19 ctx.beginPath();

20 //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线(用于创建圆或部分圆)

21 //绘制大圆

22 ctx.arc(212,212, turnplate.outsideRadius, angle, angle + arc,false);

23 //绘制小圆

24 ctx.arc(212,212, turnplate.insideRadius, angle + arc, angle,true);

25 ctx.stroke();

26 ctx.fill();

27 //锁画布(为了保存之前的画布状态)

28 ctx.save();

29 //----绘制奖品开始----

30 //奖品默认字体颜色

31 ctx.fillStyle ='#fff';

32 var text = turnplate.restaraunts[i];

33 var lukyname = turnplate.lucky[i];

34 var line_height =17;

35 //translate方法重新映射画布上的 (0,0) 位置

36 ctx.translate(212+Math.cos(angle + arc /2)* turnplate.textRadius,212+Math.sin(angle + arc /2)* turnplate.textRadius);

37 //rotate方法旋转当前的绘图

38 ctx.rotate(angle + arc /2+Math.PI /2);

39 //绘制奖品图片

40 var img =newImage();

41 img.src = turnplate.goodsimgArr[i];

42 ctx.drawImage(img,-17,35);

43 //由于设计的转盘色块是交错的，所以这样可以实现相邻奖品区域字体颜色不同

44 if(i %2==0){

45 ctx.fillStyle ='#f7452f';

46 }

47 //将字体绘制在对应坐标

48 ctx.fillText(text,-ctx.measureText(text).width /2,0);

49 //设置字体

50 ctx.font =' 14px Microsoft YaHei';

51 //绘制奖品名称

52 if(text !='优胜奖'){

53 ctx.fillText(lukyname,-ctx.measureText(lukyname).width /2,25);

54 }else{

55 ctx.fillText('优麦币',-ctx.measureText('优麦币').width /2,25);

56 }

57 //把当前画布返回(插入)到上一个save()状态之前

58 ctx.restore();

59 ctx.save();

60 //----绘制奖品结束----

61 }

62 }

63 }

每一步基本上都有注释，对于canvas方法有不理解的可以百度，或者查询我上面分享的中文手册。 html代码为：