HTML5 Canvas圆盘抽奖应用DEMO演示

}.xttblog_box{width:300px;height:300px;margin:100px auto;position:relative;

}.xttblog_box canvas{position:absolute;

}#xttblog{background-color:white;border-radius:100%;

}#xttblog01,

#xttblog03{left:50px;top:50px;z-index:30;

}#xttblog02{left:75px;top:75px;z-index:20;

}#xttblog{-o-transform:transform 6s;-ms-transform:transform 6s;-moz-transform:transform 6s;-webkit-transform:transform 6s;transition:transform 6s;-o-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;

}.taoge_btn{width:60px;height:60px;left:120px;top:120px;border-radius:100%;position:absolute;cursor:pointer;border:none;background:transparent;outline:none;z-index:40;

}

varangles;//旋转次数

varrotNum= 0;//中奖公告

varnotice= null;//转盘初始化各样式颜色

varcolor=["#ffefbf","#ffbb04","#e72c2c","#DCC722","#f4a005","#cb1418"];//后台获取奖品替换数据

varinfo=["1","2","3","4","5","6"];

canvasRun();

$('#tupBtn').bind('click',function() {//转盘旋转

runCup();//转盘旋转过程“开始抽奖”按钮无法点击

$('#tupBtn').attr("disabled",true);//“开始抽奖”按钮无法点击恢复点击

setTimeout(function() {

alert('中奖拉')

$('#tupBtn').removeAttr("disabled",true);

},6000);

});//转盘旋转

functionrunCup() {varnum= null

//获取随机数0-5 取回获奖数据下标代替 此处获取获奖数据使用异步方法

varnum=parseInt(Math.random()*(5 - 0 + 0)+ 0);//记录旋转的次数，依次叠加旋转度数，防止往回倒转 transform属性的值必须依次增加，否则会发生倒转

rotNum=rotNum+ 1

if(num!== null) {//旋转角度 = 旋转6圈(2160度)* 已经旋转的次数 + 最少旋转的圈数(5圈)+ 每个奖品下标对应的角度

angles= 2160 *rotNum+ 1800 + 360 /info.length*(info.length-num);

}else{

angles= 2160 *rotNum+ 1800}vardegValue= 'rotate(' +angles+ 'deg' + ')';

$('#xttblog').css('transform', degValue);//如果没有获取到获奖数据继续转动

if(num=== null) {

runCup();

}

}//绘制转盘

functioncanvasRun() {varcanvas=document.getElementById('xttblog');varcanvas01=document.getElementById('xttblog01');varcanvas03=document.getElementById('xttblog03');varcanvas02=document.getElementById('xttblog02');varctx=canvas.getContext('2d');varctx1=canvas01.getContext('2d');varctx3=canvas03.getContext('2d');varctx2=canvas02.getContext('2d');

createCircle();

createCirText();//绘制文字

initPoint();//绘制指针

//外圆

functioncreateCircle() {varstartAngle= 0;//扇形的开始弧度

varendAngle= 0;//扇形的终止弧度

//画一个等份扇形组成的圆形

for(vari= 0; i

startAngle=Math.PI*(i/(info.length/ 2)- 2 /info.length);

endAngle=startAngle+Math.PI*(1 /(info.length/ 2));

ctx.save();//保存备份

ctx.beginPath();//绘制两条线

ctx.arc(150,150,100, startAngle, endAngle,false);//绘制圆

ctx.lineWidth= 120;if(i% 2 == 0) {//绘制颜色

ctx.strokeStyle=color[1];

}else{

ctx.strokeStyle=color[0];

}

ctx.stroke();

ctx.restore();

}

}//各奖项

functioncreateCirText() {

ctx.textAlign= 'start';

ctx.textBaseline= 'middle';

ctx.fillStyle=color[3];varstep= 2 *Math.PI/info.length;for(vari= 0; i< 6; i++) {

ctx.save();

ctx.beginPath();

ctx.translate(150,150);

ctx.rotate(i*step);

ctx.font= "20px Microsoft YaHei";

ctx.fillStyle=color[3];

ctx.fillText(info[i],-30,-100,60);//书写转盘文字

ctx.font= "14px Microsoft YaHei";

ctx.closePath();

ctx.restore();

}

}//箭头指针

functioninitPoint() {//箭头指针

ctx1.beginPath();

ctx1.moveTo(100,24);

ctx1.lineTo(90,62);

ctx1.lineTo(110,62);

ctx1.lineTo(100,24);

ctx1.fillStyle=color[5];//指针颜色

ctx1.fill();

ctx1.closePath();//中间圆圈

ctx2.beginPath();

ctx2.arc(75,75,50,0, Math.PI* 2,false);//创建一个圆

ctx2.fillStyle=color[2];//颜色

ctx2.fill();

ctx2.closePath();//中间小圆

ctx3.beginPath();

ctx3.arc(100,100,40,0, Math.PI* 2,false);

ctx3.fillStyle=color[5];

ctx3.fill();

ctx3.closePath();//小圆文字

ctx3.font= "Bold 20px Microsoft YaHei";

ctx3.textAlign= 'start';

ctx3.textBaseline= 'middle';

ctx3.fillStyle=color[4];//抽奖文字颜色

ctx3.beginPath();

ctx3.fillText('开始',80,90,40);

ctx3.fillText('抽奖',80,110,40);

ctx3.fill();

ctx3.closePath();

}

}

});

抱歉！浏览器不支持。

抱歉！浏览器不支持。

抱歉！浏览器不支持。

抱歉！浏览器不支持。