liujiankang
/
static


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<style>

		.clear{clear:both;}

		/* 大转盘样式 */

		.drawbanner{display:block;width:85%;margin:0 auto;}

		.drawbanner .turnplate{display:block;width:100%;position:relative;}

		.drawbanner .turnplate canvas.item{width:100%;}

		.drawbanner .turnplate img.pointer{

			position: absolute;

			width: 25%;

			height: 30%;

			left: 37.5%;

			top: 32%;

		}

		#img-box{display:none;}

	</style>
</head>

<body style="background: #fff3f4;">
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>

<div class="mui-content" style="background: #fff3f4;">
	<div style="margin-bottom: 10px;">
		<img width="100%" src="images/wheel-title1.png" />
	</div>
	<div style="position: relative;">
		<div id="img-box">

		</div>
		<div class="drawbanner">
			<div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 98%;background-repeat: no-repeat;">
				<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
				<img class="pointer" src="images/turnplate-pointer.png"/>
			</div>
		</div>
		<div style="text-align: center;">
			<button class="pointer" type="button" style="background: #e9004c;color: #fff;border: 0;border-radius: 5px;display: block;width:70%;margin:20px 15%;padding:11px 0;">立即抽奖</button>
		</div>
	</div>

</div>

</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/awardRotate.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" src="js/page/wechat-utils-1.0.js"></script>
<script type="text/javascript">

    var turnplate={

        restaraunts:[],				//大转盘奖品名称

        colors:[],					//大转盘奖品区块对应背景颜色

        outsideRadius:166,			//大转盘外圆的半径

        textRadius:140,				//大转盘奖品位置距离圆心的距离

        insideRadius:40,			//大转盘内圆的半径

        startAngle:0,				//开始角度

        bRotate:false				//false:停止;ture:旋转

    };


    var prizeList = null;


    $(document).ready(function(){

        window.repleFlag = false;

        window.wxFriend = {

            "appId": "",

            "imgUrl":domanUrl + '/iamberry/common/shop/images/1.png',

            "link":"https:" + domanUrl+"/iamberry/wechat/activity/share_luck_draw",

            "desc":"哎呀！我差一点就抽到iPhone7了！亮黑版，32G啊！小伙伴你也来试试吧！",//描述

            "title":"我离iPhone7亮黑版 32G仅一步之遥，小伙伴你快来一起抽吧！",			//标题

            "netError":"您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",

            "shareTimeSuccess":"分享成功",		//这里是分享朋友圈后调用的文字

            "shareTimeCancel":"已取消分享",	//这里是取消分享给朋友圈后调用的文字

            "shareAppSuccess":"分享成功",		    //这里是分享好友后调用的文字

            "shareAppCancel":"已取消分享"	//这里是取消分享给好友后调用的文字

        };

        getConfig();


        //动态添加大转盘的奖品与奖品区域背景颜色

        $.ajax('/iamberry/wechat/game/get_prize_info',{

            data: {

                prizeGameId:1

            },

            dataType:'json',

            async:true,

            type:'post',

            timeout:15000,

            xhrFields: {

				withCredentials: true

			},

			crossDomain: true,

            success:function(dt){

            	if (dt.isRedirect) {

					location.href = dt.redirectURL;

				} else {

                if (dt.status) {

                    prizeList = dt.data;

                    //console.log(prizeList);


                    mui(prizeList).each(function(index){

                        turnplate.restaraunts[index] = this.prizeName;

                        if ((index + 1) % 2 == 0) {

                            turnplate.colors[index] = "#ff9c9d";

                        } else {

                            if (index == (prizeList.length - 1)) {

                                turnplate.colors[index] = "#f99eaa";

                            } else {

                                turnplate.colors[index] = "#f76f7d";

                            }

                        }

                        //先把图片加载出来

                        $("#img-box").append('<img src="'+this.prizeImage+'" id="'+this.prizeId+'"/>');

                    });

                    //防止图片没加载完设置1秒后再绘制canvas

                    setTimeout(function(){

                        drawRouletteWheel()

                        document.querySelector('.loading-bg').style.display = 'none';

                    },1000);

                } else {


                }

                }

            },

            error:function(xhr,type,errorThrown){


            }

        });


        //旋转转盘 item:奖品位置; txt：提示语;

        var rotateFn = function (item, txt, to){

            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,

                animateTo:(to == null ? (angles+1800) : to),

                duration:3000,

                callback:function (){

                    turnplate.bRotate = !turnplate.bRotate;

                }

            });

        };


        $(".pointer").on("click",function(){

            //去产品列表

            mui.openWindow({

                url: base_path + '/index.html' //index.html

            });

        });


    });


    function drawRouletteWheel() {

        var canvas = dc("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 = '17px Arial';

            for(var i = 0; i < turnplate.restaraunts.length; i++) {

                //添加对应图标

                if (prizeList != null) {

                    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 = "#fff";

                    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);


                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/

                    //在画布上绘制填色的文本。文本的默认颜色是黑色

                    //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度

                    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

                    var img= dc(prizeList[i].prizeId);

                    ctx.drawImage(img,-25,10);


                    //把当前画布返回（调整）到上一个save()状态之前

                }

                //----绘制奖品结束----

                ctx.restore();

            }

        }

    }

</script>
</body>

</html>