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

window.onload=function(){ drawRouletteWheel(); }; function drawRouletteWheel() { var canvas = document.getElementById("wheelcanvas"); if (canvas.getContext) { //根据奖品个数计算圆周角度 var arc = Math.PI / (turnplate.restaraunts.length/2); var ctx = canvas.getContext("2d"); //在给定矩形内清空一个矩形 ctx.clearRect(0,0,422,422); //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式 ctx.strokeStyle = "#FFBE04"; //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = '16px Microsoft YaHei'; for(var i = 0; i < turnplate.restaraunts.length; i++) { var angle = turnplate.startAngle + i * arc; ctx.fillStyle = turnplate.colors[i]; ctx.beginPath(); //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆） ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false); ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); ctx.stroke(); ctx.fill(); //锁画布(为了保存之前的画布状态) ctx.save(); //----绘制奖品开始---- ctx.fillStyle = "#E5302F"; var text = turnplate.restaraunts[i]; var line_height = 17; //translate方法重新映射画布上的 (0,0) 位置 ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius); //rotate方法旋转当前的绘图 ctx.rotate(angle + arc / 2 + Math.PI / 2); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ if(text.indexOf("M")>0){//流量包 var texts = text.split("M"); for(var j = 0; j6){//奖品名称长度超过一定范围 text = text.substring(0,6)+"||"+text.substring(6); var texts = text.split("||"); for(var j = 0; j0){ var img= document.getElementById("shan-img"); img.onload=function(){ ctx.drawImage(img,-15,10); }; ctx.drawImage(img,-15,10); }else if(text.indexOf("谢谢参与")>=0){ var img= document.getElementById("sorry-img"); img.onload=function(){ ctx.drawImage(img,-15,10); }; ctx.drawImage(img,-15,10); } //把当前画布返回（调整）到上一个save()状态之前 ctx.restore(); //----绘制奖品结束---- } } }