javascript+HTML5 캔버스 그리기 캐러셀 lottery_javascript 기술

이전에 진행했던 프로젝트 중에는 로또휠 기능이 필요한 프로젝트도 있었습니다. 프로젝트가 한동안 완료되었고, 심각한 버그는 없어 여러분과 공유하게 되었습니다.

기능적 요구사항
1. 턴테이블은 아름다워야 하고 회전효과가 부드러워야 합니다.
2. 경품 사진은 캐러셀에 표시되어야 하며, 경품은 배경에 있는 사진과 이름이 읽혀지는 것입니다.
3. 회전 애니메이션이 완료된 후 해당 프롬프트가 표시되어야 합니다.
4. 획득한 상품의 특정 알고리즘은 데이터베이스에서 작동되며 프런트엔드는 최종 효과 표시만 제공합니다.

지식 핵심 포인트
1. 보다 지능적인 회전을 달성하는 데 사용되는 jq 플러그인: awardRotate를 참조했습니다(플러그인 다운로드: http://www.jqcool.net/jquery-jqueryrotate.html).
2. 캔버스 태그와 해당 html5 API를 사용하여 작업합니다. (캔버스 중국어 매뉴얼은 http://javascript.ruanyifeng.com/htmlapi/canvas.html
에서 보실 수 있습니다.

텍스트
큰 회전목마 스타일 인용

.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%;}

턴테이블 플러그인에 필요한 매개변수:

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

매개변수에서 볼 수 있듯이 서버에서 해당 상품 이름, 상품 내용, 상품 사진 페이지 라벨 및 기타 정보를 얻은 다음 큰 캐러셀을 렌더링해야 합니다.
따라서 첫 번째 단계는 해당 상품 정보를 얻기 위해 서버에 요청을 보내고 큰 캐러셀을 생성하는 데 필요한 배열 매개변수를 순회하는 것입니다.

$.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는 제가 얻은 상금 json 데이터입니다:

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

고객이 "참여해 주셔서 감사합니다" 없이 경품을 요청했기 때문에 최소 경품도 "수상"이므로 경품을 순회한 후 "수상"에 대한 렌더링 설명을 삽입하면 됩니다.

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

이미지를 로드하는 데 시간이 걸리고 캔버스를 사용하여 이미지를 복사하려면 이미지를 로드해야 하기 때문에 모든 상품 이미지가 로드된 후 preloadimages를 사용하여 큰 캐러셀을 렌더링했습니다.

//对奖品图片预加载
 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
 }
 }
 }

캐러셀 그리기 코드:

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();
 //----绘制奖品结束----
 }
 }
 }

기본적으로 각 단계에 대한 설명이 설명되어 있습니다. 캔버스 방법이 이해되지 않으면 Baidu를 사용하거나 위에 공유한 중국어 설명서를 참조하세요.
HTML 코드는 다음과 같습니다.

<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 캔버스 그리기 캐러셀 lottery_javascript 기술" >
 <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 캔버스 그리기 캐러셀 lottery_javascript 기술" >
 </div>
 </div>

렌더링:

클릭이벤트 실행코드 :

$('.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,"恭喜获得优胜奖！");
 }
 }
 })
 });

위 코드는 기본 로직을 구현하며, 서버에서 전달한 결과에 응답하기 위해 턴테이블을 회전하는 방법도 필요합니다.

//旋转转盘 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())
 }
 }
 });
 };

알겠습니다. 주요 기능 코드는 공유했습니다. 아직 이해하지 못하는 도구와 방법이 있으면 메시지를 남겨주시면 추가하겠습니다.
요약
캔버스는 HTML5의 매우 강력한 트럼프 카드이며 다양한 멋진 효과를 얻을 수 있습니다. 이 기사가 캔버스 사용법을 배우는 친구들에게 도움이 되기를 바랍니다.