javascript+HTML5 Kemahiran melukis karusel loteri_javascript kanvas

Antara projek yang pernah saya lakukan sebelum ini, ada di antaranya yang memerlukan fungsi roda loteri. Projek ini telah siap untuk seketika, dan tiada pepijat yang serius, jadi saya berkongsi dengan semua orang.

Keperluan fungsian
1. Meja putar hendaklah cantik dan kesan putaran hendaklah licin.
2. Gambar hadiah perlu dipaparkan pada karusel, dan hadiah ialah foto dan nama yang dibaca di latar belakang.
3. Perlu ada gesaan yang sepadan selepas animasi putaran selesai.
4. Algoritma khusus bagi hadiah yang diperoleh dikendalikan dalam pangkalan data, dan bahagian hadapan hanya menyediakan paparan kesan akhir.

Isi penting pengetahuan
1. Merujuk pemalam jq: awardRotate, digunakan untuk mencapai putaran yang lebih pintar (muat turun pemalam: http://www.jqcool.net/jquery-jqueryrotate.html).
2. Gunakan teg kanvas dan api html5 yang sepadan untuk beroperasi. (Manual bahasa Cina kanvas boleh dilihat http://javascript.ruanyifeng.com/htmlapi/canvas.html

Teks
Petik gaya karusel besar

.lunck_draw_wrap{display:block;width:95%;margin-right:auto;}
 .lunck_draw_wrap .turnplate{display:block;width:106%; position:relative;}
  .lunck_draw_wrap .turnplate canvas.item{left:1px;
  position: relative;
  top:9px;
  width:100%;}
  .lunck_draw_wrap .turnplate img.pointer{ height:37.5%;
  left:34.6%;
  position: absolute;
  top:30%;
  width:31.5%;}

Parameter yang diperlukan untuk pemalam meja putar:

var turnplate ={
 restaraunts:[],//大转盘奖品名称
 lucky:[],//奖品内容
 colors:[],//大转盘奖品区块对应背景颜色
 goodsimgArr:[],//奖品图片页面标签
 outsideRadius:175,//大转盘外圆的半径
 textRadius:140,//大转盘奖品位置距离圆心的距离
 insideRadius:65,//大转盘内圆的半径
 startAngle:0,//开始角度
 bRotate:false//false:停止;ture:旋转
 };

Seperti yang dapat dilihat daripada parameter, kita perlu mendapatkan nama hadiah yang sepadan, kandungan hadiah, label halaman gambar hadiah dan maklumat lain daripada pelayan, dan kemudian memaparkan karusel besar.
Jadi langkah pertama kami ialah menghantar permintaan kepada pelayan untuk mendapatkan maklumat hadiah yang sepadan dan melintasi parameter tatasusunan yang diperlukan untuk menjana karusel besar:

$.each(data.list,function(key, value){
 turnplate.restaraunts.push(value.data0);
 turnplate.lucky.push(value.data1);
 turnplate.goodsimgArr.push(getLuckyImg + value.data4);
 if(key %2==0)
 turnplate.colors.push("#fff");
 else
 turnplate.colors.push("#5fcbd4");
 })
 

data.list ialah data json hadiah yang saya perolehi:

[
 {
 "data0":"一等奖",
 "data1":"iphone6s",
 "data2":"0",
 "data3":"0",
 "data4":"201510161406303384.png",
 "data5":"XXXX网络科技",
 "data6":"浙江省衢州市柯城区XXXXX",
 "data7":"0570-XXXXXX"
 },......
 ]

Memandangkan pelanggan meminta hadiah tanpa "Terima kasih kerana mengambil bahagian", hadiah minimum juga adalah "Hadiah Pemenang", jadi selepas melintasi hadiah, masukkan sahaja penerangan rendering "Hadiah Pemenang":

turnplate.goodsimgArr.push('../images/hongbao.png')
 turnplate.restaraunts.push("优胜奖");
 turnplate.colors.push("#5fcbd4");
 //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
 preloadimages(turnplate.goodsimgArr).done(function(images){
 drawRouletteWheel();
 });

Oleh kerana memerlukan masa untuk memuatkan imej, dan menggunakan kanvas untuk menyalin imej memerlukan imej dimuatkan sebelum ia boleh dilukis, jadi saya menggunakan pramuat imej untuk memaparkan karusel besar selepas semua imej hadiah dimuatkan:

//对奖品图片预加载
 function preloadimages(arr){
 var newimages =[], loadedimages =0
 var postaction =function(){}//此处增加了一个postaction函数
 var arr =(typeof arr !="object")?[arr]: arr
 function imageloadpost(){
 loadedimages++
 if(loadedimages == arr.length){
 postaction(newimages)//加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
 }
 }
 for(var i =0; i < arr.length; i++){
 newimages[i]=newImage()
 newimages[i].src = arr[i]
 newimages[i].onload =function(){
 imageloadpost()
 }
 newimages[i].onerror =function(){
 imageloadpost()
 }
 }
 return{//此处返回一个空白对象的done方法
 done:function(f){
 postaction = f || postaction
 }
 }
 }

Kod untuk melukis karusel:

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 ="rgba(0,0,0,0)";
 //font 属性设置或返回画布上文本内容的当前字体属性
 ctx.font ='bold 18px 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(212,212, turnplate.outsideRadius, angle, angle + arc,false);
 //绘制小圆
 ctx.arc(212,212, turnplate.insideRadius, angle + arc, angle,true);
 ctx.stroke();
 ctx.fill();
 //锁画布(为了保存之前的画布状态)
 ctx.save();
 //----绘制奖品开始----
 //奖品默认字体颜色
 ctx.fillStyle ="#fff";
 var text = turnplate.restaraunts[i];
 var lukyname = turnplate.lucky[i];
 var line_height =17;
 //translate方法重新映射画布上的 (0,0) 位置
 ctx.translate(212+Math.cos(angle + arc /2)* turnplate.textRadius,212+Math.sin(angle + arc /2)* turnplate.textRadius);
 //rotate方法旋转当前的绘图
 ctx.rotate(angle + arc /2+Math.PI /2);
 //绘制奖品图片
 var img =newImage();
 img.src = turnplate.goodsimgArr[i];
 ctx.drawImage(img,-17,35);
 //由于设计的转盘色块是交错的，所以这样可以实现相邻奖品区域字体颜色不同
 if(i %2==0){
 ctx.fillStyle ="#f7452f";
 }
 //将字体绘制在对应坐标
 ctx.fillText(text,-ctx.measureText(text).width /2,0);
 //设置字体
 ctx.font =' 14px Microsoft YaHei';
 //绘制奖品名称
 if(text !="优胜奖"){
 ctx.fillText(lukyname,-ctx.measureText(lukyname).width /2,25);
 }else{
 ctx.fillText("优麦币",-ctx.measureText("优麦币").width /2,25);
 }
 //把当前画布返回（插入）到上一个save()状态之前
 ctx.restore();
 ctx.save();
 //----绘制奖品结束----
 }
 }
 }

Setiap langkah pada dasarnya diulas Jika anda tidak memahami kaedah kanvas, anda boleh menggunakan Baidu, atau rujuk manual bahasa Cina yang saya kongsikan di atas.
Kod html ialah:

<divclass="lunck_draw_wrap">
 <divclass="turnplate"style=" background-size:100%100%;">
 <canvasclass="item"id="wheelcanvas"width="422px"height="422px"></canvas>
 <img  class="pointer lazy"  src="/static/imghwm/default1.png"  data-src="../images/chouzhang12.png"   style="max-width:90%"/ alt="javascript+HTML5 Kemahiran melukis karusel loteri_javascript kanvas" >
 <img  class="pointer lazy"  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016419155118042.jpg&#63;2016319155128?x-oss-process=image/resize,p_40" / alt="javascript+HTML5 Kemahiran melukis karusel loteri_javascript kanvas" >
 </div>
 </div>

Rendering:

Klik kod pelaksanaan acara:

$('.lunck_draw_wrap').delegate("img.pointer","click",function(){
 if(turnplate.bRotate)return;
 turnplate.bRotate =!turnplate.bRotate;
 $.getJSON("../AJAX/lottery.ashx","",function(data){
 //1090系统配置错误，1091用户未登陆或用户数据异常，1092用户剩余积分不足,1093未中奖
 hideInput("code",data.code)
 if(data.code.toString()=="1090"){
 iosalert("系统配置错误")
 }elseif(data.code.toString()=="1091"){
 iosalert("用户未登陆或用户数据异常")
 }elseif(data.code.toString()=="1092"){
 iosalert("用户剩余积分不足")
 }elseif(data.code.toString()=="1094"){
 iosalert("超过每日抽奖次数")
 }
 else{
 var upoint =0;
 upoint = parseInt($("#uPoint").html())- parseInt($("#sPoint").html());
 $("#uPoint").html(upoint);
 if(data.isWin =='true'){
 item = getArrayIndex(turnplate.restaraunts, data.name);
 rotateFn(item +1,"恭喜获得，"+ turnplate.restaraunts[item]);
 }
 else{
 rotateFn(0,"恭喜获得优胜奖！");
 }
 }
 })
 });

Kod di atas melaksanakan logik asas, dan juga memerlukan kaedah memutarkan meja putar untuk bertindak balas kepada keputusan yang diluluskan oleh pelayan:

//旋转转盘 item:奖品位置; txt：提示语;
 var rotateFn =function(item, txt){
 //根据传进来的奖品序号 计算相应的弧度
 var angles = item *(360/ turnplate.restaraunts.length)-(360/(turnplate.restaraunts.length *2));
 if(angles <270){
 angles =270- angles;
 }else{
 angles =360- angles +270;
 }
 //强制停止转盘的转动
 $('#wheelcanvas').stopRotate();
 //调用转动方法，设置转动所需参数和回调函数
 $('#wheelcanvas').rotate({
 //起始角度
 angle:0,
 //转动角度 +1800是为了多转几圈
 animateTo: angles +1800,
 duration:8000,
 callback:function(){
 iosSuccess(txt);
 turnplate.bRotate =!turnplate.bRotate;
 if($("#code").val()!="1093"){
 delayLoad(getHttpPrefix +"graphicdetails.html&#63;lukyid="+ $("#code").val())
 }
 }
 });
 };

Baiklah, kod fungsi utama telah dikongsikan Jika masih terdapat beberapa alat dan kaedah yang anda tidak faham, anda boleh tinggalkan mesej dan saya akan menambahnya.
Ringkasan
Kanvas ialah kad truf HTML5 yang sangat berkuasa dan boleh mencapai banyak kesan cantik. Saya harap artikel ini dapat membantu beberapa rakan yang sedang belajar menggunakan kanvas.