LImengbo
/
grade-answer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/question.css">
    <script src="../utils/size.js"></script>
</head>
<body>
    <div class="content">
    <div class="question-container">
        <img class="container-bg" src="../image/question/questionbg.png" alt="">
        <div class="title">
            <img src="../image/question/title.png" alt="title">
        </div>
        <div class="subject">
            <img class="inset" src="../image/question/inset.png" alt="inset">
            <img class="bottom" src="../image/question/bottom.png" alt="bottom">
            <div class="question-box"></div>
            <!--
            <div class="question" >
                <div class="audio">
                    <audio src="http://www.ytmp3.cn/down/44537.mp3" autoplay="autoplay" preload="auto">
                        您的浏览器不支持 audio 标签。
                    </audio>
                    <img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">
                    <span>甜甜圈从左数是第几个？</span>
                </div>
                <div class="question-photo"></div>
                <ul class="option">
                    <li class="select">第一个</li>
                    <li>第二个</li>
                    <li>第三个</li>
                </ul> 
                <div class="order">
                    <span>1</span><span>/5</span>    
                </div> 
            </div>
            -->
        </div>
    </div>
    <div class="popup">
        <div class="popup-content">
            <canvas id="myCanvas" width="255px" height="466px">
                您的浏览器不支持canvas标签。
            </canvas>
            <img class="bg" src="../image/question/2.jpg" alt="">
            <div class="baocun">长按保存，并分享至朋友圈</div>
            <div class="code">
                <img src="../image/question/2.jpg" alt="">
                <div class="text">
                    <span>长按识别二维码</span>
                    <span>即可获得小学课文朗读配音奖品</span>
                </div>
            </div>
            <!--
            <img class="head" src="../image/question/头像.jpg" alt="">
            -->
        </div>
    </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var num = 2;
    var length = 2;
    var ind = 0;
    for(var i = 0; i <= length; i++) {
        $("<div></div>", {
        "class": "question", // 设置样式类
        html: '<div class="audio">' + 
                '<audio src="http://www.ytmp3.cn/down/44537.mp3" autoplay="autoplay" preload="auto">' +
                        '您的浏览器不支持 audio 标签。' +
                    '</audio>' +
                    '<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
                    '<span>甜甜圈从左数是第几个？</span>' +
                 '</div>' +
                '<div class="question-photo"></div>' +
                '<ul class="option">' +
                    '<li>第一个</li>' +
                    '<li>第二个</li>' +
                    '<li>第三个</li>' +
                '</ul>' +
                '<div class="order">' +
                    '<span class="ind">1</span><span>/'+ (length + 1) +'</span>' +   
               '</div>' +
               '', // 设置内容 
        style: 'z-index:'+ num-- +'',
        }).appendTo($('.question-box')); // 追加到body标签
    }
    $('.question').each(function(index) {
        $(this).children('ul').find('li').on('click', function() {
            ind++;
            $(this).addClass('select').siblings().removeClass('select');
            var that = this;
            setTimeout(function () {
                // 因为每个问题高度不同必须重置高度
                var height = $(that).parents('.question').height();
                $('.question-box').height(height);
                if( ind > length) {
                    $('.popup').show();
                    return false;
                }
                $(that).parents('.question').slideUp('slow', function () {
                    $('.question').eq(ind).find('.ind').text(ind + 1);
                });
            }, 500)
        })
    })
    setTimeout(function () {
        var height = $('.question').height();
        $('.question-box').height(height);
    },0)
    //canvas绘制图片
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
    if(canvas.getContext){  
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");
        //回调地狱，可优化，暂时这样写
        canvasImg('../image/question/2.jpg', 0, 0, '255', '466', function() {
            canvasImg('../image/question/2.jpg', 200, 400, '50', '50', function() {
                ctx.moveTo(125,20);
                ctx.lineTo(125,170);
                ctx.fillStyle = '#fff';
                ctx.font="14px Arial";
                ctx.textAlign="center";
                ctx.fillText("王丽丽王丽丽丽丽学前测评报告",125,120);
                circleImg('../image/question/2.jpg', 110, 290, 15)
            })
        })
        ctx.restore();
    }
    function canvasImg (url, x, y, w, h, success) {
        //创建新的图片对象
        var img = new Image();
        //指定图片的URL
        img.src = url;
        //浏览器加载图片完毕后再绘制图片
        img.onload = function(){
            //以Canvas画布上的坐标(10,10)为起始点，绘制图像
            ctx.drawImage(img, x, y, w, h);  
            success();          
        };
    }
    // 封装了一个简单截取头像的方法
    function circleImg(url, x, y, r) {
        //创建新的图片对象
        var img = new Image();
        //指定图片的URL
        img.src = url;
        ctx.save();
        var d =2 * r;
        var cx = x + r;
        var cy = y + r;
        img.onload = function(){
            ctx.arc(cx, cy, r, 0, 2 * Math.PI);
            ctx.clip();
            //以Canvas画布上的坐标(10,10)为起始点，绘制图像
            ctx.drawImage(img, x, y, d, d);             
        };
    }
  //0.5s后生成图片
    setTimeout(function() {
        var dataURL = canvas.toDataURL("image/png",1.0);
        $('.bg').attr('src', dataURL)
    }, 500)
</script>
</html>