js HTML5 Canvas绘制转盘抽奖

2.主要的内容

 •html5中canvas标签的使用
 •jQueryRotate.js旋转插件

3.主要html代码

?

1 2 3 4 5 6 7 8 9 10 11 12

< body >    < div class = "content" >      < div class = "wheel" >        < canvas class = "item" id = "wheelCanvas" width = "422px" height = "422px" ></ canvas >        < img class = "pointer" src = "images/wheel-pointer.png" />      </ div >    </ div >    < div class = "tips" >      < span id = "tip" >jason</ span >    </ div > </ body > </ html >

4.主要的css代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

.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.核心js代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

/*   * 渲染转盘   * */ function drawWheelCanvas(){      // 获取canvas画板，相当于layer？？    var canvas = document.getElementById( "wheelCanvas" ); //  var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换      // 计算每块占的角度，弧度制    var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);    // 获取上下文    var ctx=canvas.getContext( "2d" );      var canvasW = canvas.width; // 画板的高度    var canvasH = canvas.height; // 画板的宽度    //在给定矩形内清空一个矩形    ctx.clearRect(0,0,canvasW,canvasH);      //strokeStyle 绘制颜色    ctx.strokeStyle = "#FFBE04" ; // 红色    //font 画布上文本内容的当前字体属性    ctx.font = '16px Microsoft YaHei' ;      // 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。    // 画具体内容    for ( var index = 0 ; index < turnWheel.rewardNames.length ; index++)    {      // 当前的角度      var angle = turnWheel.startAngle + index * baseAngle;      // 填充颜色      ctx.fillStyle = turnWheel.colors[index];        // 开始画内容      // ---------基本的背景颜色----------      ctx.beginPath();      /*       * 画圆弧，和IOS的Quartz2D类似       * context.arc(x,y,r,sAngle,eAngle,counterclockwise);       * x :圆的中心点x       * y :圆的中心点x       * sAngle,eAngle :起始角度、结束角度       * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针       * */      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();      //保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），      ctx.save();        /*----绘制奖品内容----重点----*/      // 红色字体      ctx.fillStyle = "#E5302F" ;      var rewardName = turnWheel.rewardNames[index];      var line_height = 17;      // translate方法重新映射画布上的 (0,0) 位置      // context.translate(x,y);      // 见PPT图片，      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);        // rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！      // angle，当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°      ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);        /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/      // canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。      // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本      /*       * context.fillText(text,x,y,maxWidth);       * 注意！！！y是文字的最底部的值，并不是top的值！！！       * */      if (rewardName.indexOf( "M" )>0){ //查询是否包含字段 流量包        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){ //奖品名称长度超过一定范围        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 {        //在画布上绘制填色的文本。文本的默认颜色是黑色        ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);      }        //添加对应图标      if (rewardName.indexOf( "Q币" )>0){        // 注意，这里要等到img加载完成才能绘制        imgQb.onload= function (){          ctx.drawImage(imgQb,-15,10);        };        ctx.drawImage(imgQb,-15,10);        } else if (rewardName.indexOf( "谢谢参与" )>=0){        imgSorry.onload= function (){          ctx.drawImage(imgSorry,-15,10);        };        ctx.drawImage(imgSorry,-15,10);      }      //还原画板的状态到上一个save()状态之前      ctx.restore();        /*----绘制奖品结束----*/      } }