基于canvas的转盘抽奖

最新推荐文章于 2024-04-15 00:34:23 发布
黑骑军
最新推荐文章于 2024-04-15 00:34:23 发布
阅读量406
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/m0_37902100/article/details/79009082
本文介绍了一个基于HTML5和Canvas技术实现的抽奖盘页面设计案例。该案例详细展示了如何通过JavaScript进行页面交互逻辑的编写，包括抽奖盘的绘制、转动效果、中奖提示以及活动说明等功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



  
<!--</div>-->
<!--pop-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .discPrize{
            width: 100%;
            height: 100%;
            background-image: url("{skin:images/DiscPrize/bg.png}");
            background-size:100% 100%;
        }
        .canvas{
            width: 100%;
            /*height: 40%;*/
            margin-top: 50%;
        }
        .btn_prize{
            display: block;
            width: 4rem;
            height: 4rem;

            position: absolute;
            top:50%;
            left:40%;
            z-index: 100;
        }
        .dicuter{

            width: 8%;
            position: absolute;
            /*top: 37.5%;*/
            /*left: 45.8%;*/
        }
        .modals{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 200;
            background: #000000;
            opacity: 0.6;
            display: none;
        }
        .modals-tip{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
            width: 100%;
            height: 80%;
            background-image: url("{skin:images/DiscPrize/tip.png}");
            background-size:100% 100%;
            z-index: 300;
            display: none;
        }
        .btn_cancel{
            position: absolute;
            left: 25%;
            top: 85%;
            width: 50%;
            height: 10%;
            z-index: 350;
            display: inline-block;
        }
        .remainder{
            position: absolute;
            top: 91.5%;
            left:50%;
            width: 20%;
            color: #fff;
            text-align: left;
            /*font-size: .8rem;*/
            font-weight: 600;
            /*text-align: center;*/
            /*height: 1.5rem;*/
            /*line-height: 1.5rem;*/
        }
        .text-tip{
            margin: 60% 12% 0 11%;
            color:#A51D0C;
        }
        .text_prize{
            font-size: 1rem;
            color: #D80010;
        }
        .btn_explain{
            position: absolute;
            left: 85%;
            top: 5%;
            width: 8%;
            height: 8%;
            z-index: 350;
            display: inline-block;
        }
        .explain_modal{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
            width: 100%;
            height: 100%;
            background-image: url("{skin:images/DiscPrize/DiscrExplain.png}");
            background-size:100% 100%;
            z-index: 400;
            display: none;
        }
        .cancel_Explain{
            margin-left: 80%;
            margin-top: 5%;
        }
        .item_art{
            margin-top: 25%;
        }
        .block_center{
            margin: 0 auto;
            text-align: center;
            width: 30%;
            color: #f00b0d;
            font-weight: 600;
            font-size: .7rem;
        }
        .center_radius{
            border-radius: 1rem;
            background-color: #fff;
            padding: .25rem;
        }
        .item_text{
            margin-top: .25rem;
        }
        .item_text li{
            text-align: center;
            font-size: .5rem;
            color: #fff;
        }
        .item_content{
            margin-top: .25rem;
        }
        .member_text{
            position: absolute;
            font-size: .6rem;
            left:62%;
            top:83%;
            color: #FFFFFF;
        }
        .explain_image{
            text-align: center;
        }
        .img_dicuter{
            visibility: hidden;
            position: absolute;
            left:30%;
            top: 10%;
            width: 1rem;
        }
    </style>
</head>
<body>
<div class="content discPrize">
    <a class="btn_explain" type="button">

    </a>
    <canvas id="stockGraph" class="canvas" width="300" height="300">

    </canvas>
    <a class="btn_prize" type="button"  ></a>
    <img class="dicuter" style="top: 0;left: 0;visibility:hidden" src="{skin:images/DiscPrize/Dicuter.png}" alt="">
    <span class="member_text"><span></span>积分即可参加一次</span>
    <span class="remainder">400</span>
    <div class="modals">

    </div>
    <div class="modals-tip">
        <p class="text-tip" style="">
            <br/>
            <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;亲爱的会员,恭喜你获得由妈仔谷公司提供的<span class="text_prize">XXXX</span>,请您完善会员信息,妈仔谷客服将于-->
            <!--<span class="text_time">XXXX年XX月XX日</span>前与您联系,敬请保持手机网络的畅通，感谢您的参与。-->
        </p>
        <a class="btn_cancel" type="button"></a>

    </div>
    <!--<a class="integral" type="button">积分查询</a>-->
    <div class="explain_modal">
        <span class="cancel_Explain icon icon-down"></span>
        <ul class="item_art">
            <li class="item_content">
                <div >
                    <div class="block_center">
                        <span class="center_radius">活动奖品</span>
                    </div>
                    <ul class="item_text  activity_prize">
                    </ul>
                </div>
            </li>
            <li class="item_content">
                <div >
                    <div class="block_center">
                        <span class="center_radius">活动时间</span>
                    </div>

                    <ul class="item_text activity_time">

                    </ul>
                </div>
            </li>
            <li class="item_content">
                <div >
                    <div class="block_center">
                        <span class="center_radius">主办单位</span>
                    </div>

                    <ul class="item_text  activity_sponsor">
                        <!--<li>-->
                        <!--本次活动主办单位:湖南妈仔谷母婴用品有限公司-->
                        <!--</li>-->
                    </ul>
                </div>
            </li>
            <li class="item_content">
                <div >
                    <div class="block_center">
                        <span class="center_radius">参加条件</span>
                    </div>

                    <ul class="item_text  activity_inter">

                    </ul>
                </div>
            </li>
            <li class="item_content" >
                <div class="explain_image">
                    <img src="" >
                    <!--<img style="position: relative;left:30%;top: 10%;width:5% " src="{skin:images/DiscPrize/Dicuter.png}" alt="">-->
                </div>
                <img class="img_dicuter" style=" " src="{skin:images/DiscPrize/Dicuter.png}" alt="">
            </li>
        </ul>
    </div>
</div>

<!--<script src="lib/jquery/dist/jquery.js"></script>-->
<script>
    window.onload=function () {
        var pageObj=$('.discPrize').offset();
        $('.modals').css({"display":"block"});
        var time;
        var prizeAngle=0;//
        var prize_result=0;
        var data={
            "time":"2018年1月24日-2018年2月24日",
            "sponsor":"湖南妈仔谷母婴用品有限公司",
            "quali":" 妈仔谷会员200积分参加一次",
            "score":"200",
            "goal":[
                {"level":"特等奖","name":"Iphone8","type":"1"},
                {"level":"一等奖","name":"飞利浦空气净化器","type":"1"},
                {"level":"二等将","name":"Ipad平板电脑","type":"1"},
                {"level":"三等将","name":"50元无门槛现金劵","type":"0"},


//                {"level":"四等奖","name":"各品类优惠券","type":"0"},
//                {"level":"五等奖","name":"各品类优惠券","type":"0"},
//                {"level":"六等奖","name":"各品类优惠券","type":"0"},
                {"level":"幸运奖","name":"各品类优惠券","type":"0"}
            ],
        };
        $('.member_text span').html(data.score);
        var prize=data.goal;
        var colorbg = ['#F6462F', '#FFEAB1', '#FFFFFF'];
        var len = prize.length;
        var pieAngle = 360 / len;

        var x_dev=95;
        if(len ==3){
//            var divSum =45 ;
            var trange=135;
            x_dev=90;
        }else if(len==4){
//            var divSum =25;
            var trange=120;
        }else if(len==5){
//            var divSum =12 ;
            var trange=110
        }else if(len==6){
//            var divSum =-2 ;
            var trange=100;
            x_dev=90;
        }else if(len==7){
//            var divSum =-15 ;
            var trange=100;
            x_dev=95;
        }else if(len==8){
//            var divSum =-20;
            var trange=100;
            x_dev=100;
        }

        var canvas = document.getElementById('stockGraph');
        var ctx = canvas.getContext('2d');

        canvas.width =pageObj.width;
        canvas.height =pageObj.width;
        var center=pageObj.width/2;
        var total=0;
        var draw = function (x, y, r, start, end, color, type) {
            var unit = Math.PI / 180;
            ctx.beginPath();
            ctx.arc(x, y, r, start * unit, end * unit);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();

        };

        var sector = function (start, end, color) {

            var starts = Math.PI * start / 180;
            var ends = Math.PI * end / 180;
            ctx.beginPath();
            ctx.moveTo(center, center);
            ctx.arc(center, center, center-38, starts, ends);
            ctx.lineTo(center, center);

            ctx.strokeStyle = "#fff";
            ctx.stroke();
            ctx.fillStyle = color;
            ctx.fill();
            ctx.closePath();
        };

        function lastFun(){
            ctx.font = "14px scans-serif";
            ctx.fillStyle = "#fff";
            ctx.fillText('点      击', -26, -10);
            ctx.fillText('抽      奖', -26, 18);

            for(var i=0;i<12;i++){

                draw(-(0 + (center-25)*Math.cos(Math.PI*(30*i)/180)), (0 + (center-25)*Math.sin(Math.PI*(30*i)/180)), 4, 0, 360, '#FFFEFE', 'fill');
            }
            for(var i=1;i<26;i=i+2){

                draw(-(0 + (center-25)*Math.cos(Math.PI*(15*i)/180)), (0 + (center-25)*Math.sin(Math.PI*(15*i)/180)), 4, 0, 360, '#F86000', 'stroke');
            }

            for(var i=0;i<12;i++){
                if(i%2 == 0){
                    draw(-(0 + (50-5)*Math.cos(Math.PI*(30*i)/180)), (0 + (50-5)*Math.sin(Math.PI*(30*i)/180)), 4, 0, 360, '#FFFEFE', 'fill');
                }else{
                    draw(-(0 + (50-5)*Math.cos(Math.PI*(30*i)/180)), (0 + (50-5)*Math.sin(Math.PI*(30*i)/180)), 4, 0, 360, '#F86000', 'stroke');
                }

            }

            total=(pieAngle/2)+total;
            ctx.rotate(Math.PI * (pieAngle/2) / 180);
            ctx.translate(-center, -center);
//                ctx.save();
//                ctx.restore();
//                ctx.rotate(Math.PI *12/ 6);
            $('.modals').css({"display":"none"});
        }

        var plotFun=function(){
            ctx.beginPath();
            draw(center, center, center-20, 0, 360, '#FFBE04', 'fill');
            draw(center, center, center-30, 0, 360, '#FF9000', 'fill');

            $(prize).each(function (i) {
                if (i == 0) {
                    var bg = colorbg[0];
                } else if (i % 2 != 0 && i != 0) {
                    var bg = colorbg[1];
                } else if (i % 2 == 0 && i != 0) {
                    var bg = colorbg[2];
                }
                sector((i * pieAngle)-90, ((i + 1) * pieAngle)-90, bg);
            });
            draw(center, center, 50, 0, 360, '#F69A0B', 'fill');
            draw(center, center, 42, 0, 360, '#FFF8C4', 'fill');
            draw(center, center, 40, 0, 360, '#FF6600', 'fill');
            var flagMath=0;
            var textFun = function (angle,version,reward,i) {
                console.log(reward);

                if(len == 5){
                    var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2)/180));
                    var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
                    var y_deval=center/20;
                }else if(len == 4){
                    var x=(0 + (center)*Math.cos(Math.PI*(360/len/2*1.15)/180));
                    var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
                    var y_deval=center/6;
                }else if(len == 3){
                    var x=(0 + (center)*Math.cos(Math.PI*(360/len/2.1)/180));
                    var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
                    var y_deval=center/3;
                }else if(len == 6){
                    var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2*1.15)/180));
                    var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
                    var y_deval=0;
                }else if(len == 7){
                    var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2*1.15)/180));
                    var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
                    var y_deval=-center/15;
                }else if(len == 8){
                    var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2*1.15)/180));
                    var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
                    var y_deval=-center/15;
                }
                var text = version ;
                flagMath=flagMath+1;
                var dev = Math.PI * (angle) / 180;
                ctx.rotate(dev);//旋转数值
                ctx.translate(x, (y_deval));
                ctx.rotate(Math.PI * trange / 180);

                if( pageObj.width<=325){
                    ctx.font = "18px scans-serif normal";
                }else{
                    ctx.font = "24px scans-serif normal";
                }

                console.log(i);
                if(i == 0){
                    ctx.fillStyle = "#FFF";
                }else{
                    ctx.fillStyle = "#F6462F";
                }
//
                ctx.fillText(text, 0, 0);

                ctx.font = "12px scans-serif normal";
                ctx.fillStyle = "#000";
                var lengthText=ctx.measureText(text);
                //奖名长
                var lengthReward=ctx.measureText(reward);
                //奖品长
                var textDev=Number(lengthText.width)-Number(lengthReward.width);
//                        console.log("sum");
//                        console.log(textDev);
                if( pageObj.width<=325){
                    if(textDev<=-60){
                        ctx.fillText(reward, textDev/3, 20);
                    }else if(-60<textDev<=-30){

                    }else if(-30<textDev<=0){
                        ctx.fillText(reward, textDev/5, 20);
                    } else {
//                            ctx.fillText(reward, textDev/3, 20);
                        ctx.fillText(reward, -textDev/2, 20);
                    }
                }else{
                    if(textDev<=-60){
                        ctx.fillText(reward, textDev/5, 20);
                    }else if(-60<textDev<=-30){
//                            ctx.fillText(reward, textDev/3, 20);
//                            ctx.fillText(reward, textDev/6, 20);
                    }else if(-30<textDev<=0){
                        ctx.fillText(reward, 0, 20);
                    }else{
                        ctx.fillText(reward, -textDev/2, 20);
                    }
                }
//                        ctx.font = "12px scans-serif";
//                        ctx.fillStyle = "#000";
////                        ctx.drawImage(img, -5,-39,45,45);
//                        ctx.fillText(text, 0, -42);
                ctx.rotate(Math.PI * (-trange) / 180);
                ctx.translate(-x, -(y_deval));
                ctx.rotate(Math.PI * (-angle) / 180);
                if(flagMath == len){
                    lastFun();
                }
//                    }
            };
//
            ctx.translate(center, center);

            $(prize).each(function (i) {

//                    img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1515400394&di=13c6a72d888d199437228cd911d1f465&src=http://pic30.nipic.com/20130626/11171147_164348016385_2.jpg";
                var angle = 15 + (i * pieAngle)-90;
                textFun(angle, prize[i].level,prize[i].name,i);
            });

            ctx.closePath();
        };

        var circleFun=function (text) {
            //获取用户积分
            var score_user=400;
//            score_user=score_user+200;
            $('.remainder').html(score_user);

            if(text !="init"){
                spyFun();
                function spyFun(){
                    if(!i){
                        time=setTimeout(function(){
                            console.log("开始转");
                            rotate();
                        },100)
                    }else{
//                        time=setTimeout(funcition(){
                        console.log("查找目标");
                        setTimeout(rotate,100);
//                        },0)
                    }
                }

            }else{
                plotFun();
            }



//            if(total<=(pieAngle/2*2*len*2)+prizeAngle*2){
//            console.log(prizeAngle);
            var rotate=function(){

                if(total<5*360+prizeAngle+prize_result){
                    plotFun();
//                    ctx.beginPath();
//                    draw(center, center, center-20, 0, 360, '#FFBE04', 'fill');
//                    draw(center, center, center-30, 0, 360, '#FF9000', 'fill');
//                    $(prize).each(function (i) {
//                        if (i == 0) {
//                            var bg = colorbg[0];
//                        } else if (i % 2 != 0 && i != 0) {
//                            var bg = colorbg[1];
//                        } else if (i % 2 == 0 && i != 0) {
//                            var bg = colorbg[2];
//                        }
//                        sector((i * pieAngle)-90, ((i + 1) * pieAngle)-90, bg);
//                    });
//                    draw(center, center, 50, 0, 360, '#F69A0B', 'fill');
//                    draw(center, center, 42, 0, 360, '#FFF8C4', 'fill');
//                    draw(center, center, 40, 0, 360, '#FF6600', 'fill');
//                    var flagMath=0;
//                    var textFun = function (angle,version,reward,i) {
//
//                        if(len == 5){
//                            var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2)/180));
//                            var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
//                            var y_deval=center/20;
//                        }else if(len == 4){
//                            var x=(0 + (center)*Math.cos(Math.PI*(360/len/2*1.15)/180));
//                            var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
//                            var y_deval=center/6;
//                        }else if(len == 3){
//                            var x=(0 + (center)*Math.cos(Math.PI*(360/len/2.1)/180));
//                            var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
//                            var y_deval=center/3;
//                        }else if(len == 6){
//                            var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2*1.15)/180));
//                            var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
//                            var y_deval=0;
//                        }else if(len == 7){
//                            var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2*1.15)/180));
//                            var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
//                            var y_deval=-center/15;
//                        }else if(len == 8){
//                            var x=(0 + (center-(center/4))*Math.cos(Math.PI*(360/len/2*1.15)/180));
//                            var y=(0 + (center+0)*Math.sin(Math.PI*(90/2)/180));
//                            var y_deval=-center/15;
//                        }
//                        var text = version ;
//                        flagMath=flagMath+1;
//                        var dev = Math.PI * (angle) / 180;
//                        ctx.rotate(dev);//旋转数值
//                        ctx.translate(x, (y_deval));
//                        ctx.rotate(Math.PI * trange / 180);
//
//                        if( pageObj.width<=325){
//                            ctx.font = "18px scans-serif normal";
//                        }else{
//                            ctx.font = "24px scans-serif normal";
//                        }
//
//                        console.log(i);
//                        if(i == 0){
//                            ctx.fillStyle = "#FFF";
//                        }else{
//                            ctx.fillStyle = "#F6462F";
//                        }
////
//                        ctx.fillText(text, 0, 0);
//
//                        ctx.font = "12px scans-serif normal";
//                        ctx.fillStyle = "#000";
//                        var lengthText=ctx.measureText(text);
//                        //奖名长
//                        var lengthReward=ctx.measureText(reward);
//                        //奖品长
//                        var textDev=Number(lengthText.width)-Number(lengthReward.width);
////                        console.log("sum");
////                        console.log(textDev);
//                        if( pageObj.width<=325){
//                            if(textDev<=-60){
//                                ctx.fillText(reward, textDev/3, 20);
//                            }else if(-60<textDev<=-30){
//
//                            }else if(-30<textDev<=0){
//                                ctx.fillText(reward, textDev/5, 20);
//                            } else {
////                            ctx.fillText(reward, textDev/3, 20);
//                                ctx.fillText(reward, -textDev/2, 20);
//                            }
//                        }else{
//                            if(textDev<=-60){
//                                ctx.fillText(reward, textDev/5, 20);
//                            }else if(-60<textDev<=-30){
////                            ctx.fillText(reward, textDev/3, 20);
////                            ctx.fillText(reward, textDev/6, 20);
//                            }else if(-30<textDev<=0){
//                                ctx.fillText(reward, 0, 20);
//                            }else{
//                                ctx.fillText(reward, -textDev/2, 20);
//                            }
//                        }
//
//                        ctx.rotate(Math.PI * (-trange) / 180);
//                        ctx.translate(-x, -(y_deval));
//                        ctx.rotate(Math.PI * (-angle) / 180);
//                        if(flagMath == len){
//                            lastFun();
//                        }
//                    };
////
//                    ctx.translate(center, center);
//
//                    $(prize).each(function (i) {
//                        var angle = 15 + (i * pieAngle)-90;
//                        textFun(angle, prize[i].level,prize[i].name,i);
//                    });
//
//                    ctx.closePath();
                    spyFun();
                }else{
                    total=0;
//                    console.log(i);
                    if(!i){

//
                        spyFun()
                    }else{
                        //清空定时器
//                        console.log("cccc");
                        clearInterval(time);
                        time=null;
                        if(text !='init'){
                            prize_detail(i)
                        }
//                        return;
                    }
                }
            }

        };
        //打开获奖的模态及提示
        var prize_detail=function (n) {
            setTimeout(function () {
                var html="";
                var type = prize[n].type;
                console.log(type);
                if(type == '1'){
                    html="亲爱的会员,恭喜你获得由妈仔谷公司提供的"+"<span class='text_prize'>"+prize[n-1].name+"</span>"+"一份，请您完善会员信息,妈仔谷客服将于您联系,敬请保持手机网络的畅通，感谢您的参与!";
                }else if(type == '0'){
                    html="亲爱的会员,恭喜你获得由妈仔谷公司提供的"+"<span class='text_prize'>"+prize[n-1].name+"</span>"+"，请您完善会员信息,奖劵将发放到您的会员卡上";
                }
                html='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+html;
//                var html='';
//                if()
                $('.text-tip').html(html);

                $('.modals').css({"display":"block"});
                $('.modals-tip').css({"display":"block"});
            },1000);

        };
        //初始化
        circleFun('init');

        //奖项号
        var i='';
        //点击抽奖按钮
        $('.btn_prize').click(function(){
            $(this).css({"display":"none"});
            i='';
            prizeAngle=0;
            prize_result=0;

            canvas.width =pageObj.width;
            canvas.height = pageObj.width;

            setTimeout(function(){
                //奖号
                var n=0;
                i=n+1;
                prizeAngle=(pieAngle/2);
                if(len==7 && i==0){
                    prize_result=pieAngle*(len-i);
                }else if(i !=""){
//                    console.log(i);
                    prize_result=pieAngle*(len-i)-(pieAngle/2)+pieAngle;

//                    console.log(prize_result);
                }
            },5000);

            total=0;

            circleFun();
        });
        //关闭中奖的模态和提示
        $('.btn_cancel').click(function () {
            $('.modals').css({"display":"none"});
            $('.modals-tip').css({"display":"none"});
            $('.btn_prize').css({"display":"block"});
        });

        //活动说明的弹窗
        $('.btn_explain').click(function () {

            var html="<li>"+data.time+"</li>";
            $('.activity_time').html(html);
            html="<li>本次活动主办单位 : "+data.sponsor+"</li>";
            $('.activity_sponsor').html(html);
            html='<li>妈仔谷会员200积分参加一次</li>';
            $('.activity_inter').html(html);
            html="";
            $(prize).each(function (i) {
                html=html+"<li>"+prize[i].name+":"+prize[i].content+"</li>"
            });
            $(".activity_prize").html(html);

            $('.explain_modal').css({"display":"block"});

            setTimeout(function () {
                var dicEle=$('.img_dicuter').offset();
                var off=$('.explain_modal .explain_image').offset();
                console.log(off);
                var t=off.top+(off.height/2)-(dicEle.height*4/5);
                var l=(off.width)/2-(dicEle.width/2);
                document.getElementsByClassName("img_dicuter")[0].style.top=t+'px';
                document.getElementsByClassName("img_dicuter")[0].style.left=l+'px';
                document.getElementsByClassName("img_dicuter")[0].style.visibility='visible';
            },500)


        });

        //关闭活动说明
        $('.cancel_Explain').click(function () {
            $('.explain_modal').css({"display":"none"})
        });

        setTimeout(function () {
            var cxt = document.getElementById('stockGraph');
            var dataURL = cxt.toDataURL("image/png",1.0);
            $('.explain_image img')[0].src=dataURL;
        },1000);

        function getWidth() {
            var dicEle=$('.dicuter').offset();
            var off=$('.canvas').offset();
            var t=off.top+(off.height/2)-(dicEle.height*4/5);
            var l=(off.width)/2-(dicEle.width/2);
            document.getElementsByClassName("dicuter")[0].style.top=t+'px';
            document.getElementsByClassName("dicuter")[0].style.left=l+'px';
            document.getElementsByClassName("dicuter")[0].style.visibility='visible';



        }
        getWidth();
    };

</script>
</body>
</html>