js HTML5 Canvas绘制转盘抽奖

淩亂°似流年 2022-07-11 15:29 276阅读 0赞

2.主要的内容

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

3.主要html代码

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"content"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"wheel"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>canvas</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"item"</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"wheelCanvas"</code> 
      <code>width</code> 
      <code>=</code> 
      <code>"422px"</code> 
      <code>height</code> 
      <code>=</code> 
      <code>"422px"</code> 
      <code>&gt;&lt;/</code> 
      <code>canvas</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pointer"</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"images/wheel-pointer.png"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"tips"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"tip"</code> 
      <code>&gt;jason&lt;/</code> 
      <code>span</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

4.主要的css代码

[?][Link 1]

5.核心js代码

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> 
    <div>
      53 
    </div> 
    <div>
      54 
    </div> 
    <div>
      55 
    </div> 
    <div>
      56 
    </div> 
    <div>
      57 
    </div> 
    <div>
      58 
    </div> 
    <div>
      59 
    </div> 
    <div>
      60 
    </div> 
    <div>
      61 
    </div> 
    <div>
      62 
    </div> 
    <div>
      63 
    </div> 
    <div>
      64 
    </div> 
    <div>
      65 
    </div> 
    <div>
      66 
    </div> 
    <div>
      67 
    </div> 
    <div>
      68 
    </div> 
    <div>
      69 
    </div> 
    <div>
      70 
    </div> 
    <div>
      71 
    </div> 
    <div>
      72 
    </div> 
    <div>
      73 
    </div> 
    <div>
      74 
    </div> 
    <div>
      75 
    </div> 
    <div>
      76 
    </div> 
    <div>
      77 
    </div> 
    <div>
      78 
    </div> 
    <div>
      79 
    </div> 
    <div>
      80 
    </div> 
    <div>
      81 
    </div> 
    <div>
      82 
    </div> 
    <div>
      83 
    </div> 
    <div>
      84 
    </div> 
    <div>
      85 
    </div> 
    <div>
      86 
    </div> 
    <div>
      87 
    </div> 
    <div>
      88 
    </div> 
    <div>
      89 
    </div> 
    <div>
      90 
    </div> 
    <div>
      91 
    </div> 
    <div>
      92 
    </div> 
    <div>
      93 
    </div> 
    <div>
      94 
    </div> 
    <div>
      95 
    </div> 
    <div>
      96 
    </div> 
    <div>
      97 
    </div> 
    <div>
      98 
    </div> 
    <div>
      99 
    </div> 
    <div>
      100 
    </div> 
    <div>
      101 
    </div> 
    <div>
      102 
    </div> 
    <div>
      103 
    </div> 
    <div>
      104 
    </div> 
    <div>
      105 
    </div> 
    <div>
      106 
    </div> 
    <div>
      107 
    </div> 
    <div>
      108 
    </div> 
    <div>
      109 
    </div> 
    <div>
      110 
    </div> 
    <div>
      111 
    </div> 
    <div>
      112 
    </div> 
    <div>
      113 
    </div> 
    <div>
      114 
    </div> 
    <div>
      115 
    </div> 
    <div>
      116 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/*</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>* 渲染转盘</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>* */</code> 
     </div> 
     <div> 
      <code>function</code> 
      <code> drawWheelCanvas(){ </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// 获取canvas画板，相当于layer？？</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>canvas = document.getElementById(</code> 
      <code>"wheelCanvas"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>//&nbsp; var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// 计算每块占的角度，弧度制</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// 获取上下文</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>ctx=canvas.getContext(</code> 
      <code>"2d"</code> 
      <code>);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>canvasW = canvas.width; </code> 
      <code>// 画板的高度</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>canvasH = canvas.height; </code> 
      <code>// 画板的宽度</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>//在给定矩形内清空一个矩形</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>ctx.clearRect(0,0,canvasW,canvasH);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>//strokeStyle 绘制颜色</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>ctx.strokeStyle = </code> 
      <code>"#FFBE04"</code> 
      <code>; </code> 
      <code>// 红色</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>//font 画布上文本内容的当前字体属性</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>ctx.font = </code> 
      <code>'16px Microsoft YaHei'</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// 画具体内容</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>index = 0 ; index &lt; turnWheel.rewardNames.length ; index++)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 当前的角度</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>angle = turnWheel.startAngle + index * baseAngle;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 填充颜色</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fillStyle = turnWheel.colors[index];</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 开始画内容</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// ---------基本的背景颜色----------</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.beginPath();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>/*</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* 画圆弧，和IOS的Quartz2D类似</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* context.arc(x,y,r,sAngle,eAngle,counterclockwise);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* x :圆的中心点x</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* y :圆的中心点x</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* sAngle,eAngle :起始角度、结束角度</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* */</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, </code> 
      <code>false</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, </code> 
      <code>true</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.stroke();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fill();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.save();</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>/*----绘制奖品内容----重点----*/</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 红色字体</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fillStyle = </code> 
      <code>"#E5302F"</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>rewardName = turnWheel.rewardNames[index];</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>line_height = 17;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// translate方法重新映射画布上的 (0,0) 位置</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// context.translate(x,y);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 见PPT图片，</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.translate(translateX,translateY);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// angle，当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>/*</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* context.fillText(text,x,y,maxWidth);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* 注意！！！y是文字的最底部的值，并不是top的值！！！</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>* */</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(rewardName.indexOf(</code> 
      <code>"M"</code> 
      <code>)&gt;0){ </code> 
      <code>//查询是否包含字段 流量包</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>rewardNames = rewardName.split(</code> 
      <code>"M"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>j = 0; j&lt;rewardNames.length; j++){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.font = (j == 0)?</code> 
      <code>'bold 20px Microsoft YaHei'</code> 
      <code>:</code> 
      <code>'16px Microsoft YaHei'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(j == 0){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fillText(rewardNames[j]+</code> 
      <code>"M"</code> 
      <code>, -ctx.measureText(rewardNames[j]+</code> 
      <code>"M"</code> 
      <code>).width / 2, j * line_height);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>if</code> 
      <code>(rewardName.indexOf(</code> 
      <code>"M"</code> 
      <code>) == -1 &amp;&amp; rewardName.length&gt;6){ </code> 
      <code>//奖品名称长度超过一定范围</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>rewardName = rewardName.substring(0,6)+</code> 
      <code>"||"</code> 
      <code>+rewardName.substring(6);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>rewardNames = rewardName.split(</code> 
      <code>"||"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>j = 0; j&lt;rewardNames.length; j++){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//在画布上绘制填色的文本。文本的默认颜色是黑色</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//添加对应图标</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(rewardName.indexOf(</code> 
      <code>"Q币"</code> 
      <code>)&gt;0){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 注意，这里要等到img加载完成才能绘制</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>imgQb.onload=</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.drawImage(imgQb,-15,10);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.drawImage(imgQb,-15,10);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>if</code> 
      <code>(rewardName.indexOf(</code> 
      <code>"谢谢参与"</code> 
      <code>)&gt;=0){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>imgSorry.onload=</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.drawImage(imgSorry,-15,10);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.drawImage(imgSorry,-15,10);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//还原画板的状态到上一个save()状态之前</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ctx.restore();</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>/*----绘制奖品结束----*/</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://www.jb51.net/article/90498.htm#