<!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>学前能力测试</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.jpg" 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">
<!--需要点击播放-->
<audio id="audio" src="" >
您的浏览器不支持 audio 标签。
</audio>
<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="750px" height="1334px">
您的浏览器不支持canvas标签。
</canvas>
<!--<img class="bg" src="../image/question/2.jpg" alt="" crossorigin="anonymous">-->
<img class="bg" alt="" crossorigin="anonymous">
<div class="baocun">长按保存，并分享至朋友圈</div>
<div class="code">
<img src="../image/question/code.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>
//console.log(localStorage.getItem('userData') == 'undefined')
window.onload=function(){
if(localStorage.getItem('userData') == 'undefined') {
//alert('请重新扫码登陆')
window.location.href = '../index.html'
return false;
}
var user = JSON.parse(localStorage.getItem('userData'));
var uid = user.uid;
var avatar = user.avatar ? user.avatar : '';
var name = user.wechatName ? user.wechatName : '小朋友';
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var data = {
"activityId": "1",
"answer": "",
"questionId": "",
"requestId": ""
}
var ind = 0;
function recursion() {
ajaxData("https://activity.lingjiao.cn/activity/activity/xq", uid, data, function(result){
var length = result.data.questionNum;
if( ind >= length && result.data.isEnd === 0) {
$('#audio').attr('src', "")
$('.popup').show();
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//回调地狱，可优化，暂时这样写
//alert(result.data.poster)
canvasImg(ctx, result.data.poster, 0, 0, '750', '1334', function() {
ctx.moveTo(365,20);
ctx.lineTo(365,170);
ctx.fillStyle = '#fff';
ctx.font="36px Arial";
ctx.textAlign="center";
//alert(name)
ctx.fillText(name + "学前测评报告",365,370);
//alert(avatar)
circleImg(ctx, avatar, 328, 836, 41)
})
ctx.restore();
}
// 2.5s后生成图片
setTimeout(function() {
var dataURL = canvas.toDataURL("image/jpeg",1.0);
$('.bg').attr('src', dataURL)
}, 2500)
return false;
}
data.questionId = result.data.question.id;
data.requestId = result.data.requestId;
// 一开始创建div 没内容
$("<div></div>", {
"class": "question", // 设置样式类
html: '<div class="order">' +
'<span class="ind">1</span><span>/'+ length +'</span>' +
'</div>', // 设置内容
}).appendTo($('.question-box')); // 追加到body标签
// 初次渲染第一题
renderDiv(ind, result.data.question)
$('.question').eq(ind).children('ul').find('li').one('click', function() {
data.answer = $(this).data('answer');
ind++;
$(this).addClass('select').siblings().removeClass('select');
var that = this;
recursion();
setTimeout(function () {
$(that).parents('.question').slideUp('slow', function () {
$('.question').eq(ind).find('.ind').text(ind + 1);
});
}, 100)
})
})
}
recursion();
// ajax请求
function ajaxData (url, uid, data, success) {
$.ajax({
url: url,
type: 'POST',
headers: {'uid': uid},
contentType:'application/json;charset=utf-8',
data: JSON.stringify(data),
success: success
});
}
// 渲染元素
function renderDiv (ind, datas) {
$('#audio').attr('src', datas.audio)
var renders = '<div class="audio">' +
// '<audio src="'+ datas.audio +'" autoplay="autoplay" loop="loop">' +
// '您的浏览器不支持 audio 标签。' +
// '</audio>' +
'<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
'<div>'+ datas.content +'</div>' +
'</div>' +
'<div class="question-photo">'+
'<img src="'+ datas.imgUrl +'" alt="">'+
'</div>' +
'<ul class="option">' +
'<li data-answer="A">'+ datas.optionA +'</li>' +
'<li data-answer="B">'+ datas.optionB +'</li>' +
'<li data-answer="C">'+ datas.optionC +'</li>' +
'</ul>'
$('.question').eq(ind).prepend(renders);
audioAutoPlay('audio');
}
function canvasImg (ctx, url, x, y, w, h, success) {
//创建新的图片对象
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
//指定图片的URL
img.src = url;
//浏览器加载图片完毕后再绘制图片
img.onload = function(){
//以Canvas画布上的坐标(10,10)为起始点，绘制图像
ctx.drawImage(img, x, y, w, h);
success();
};
}
// 封装了一个简单截取头像的方法
function circleImg(ctx, url, x, y, r) {
//创建新的图片对象
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
//指定图片的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);
};
}
// 解决苹果不能播放
function audioAutoPlay(id){
var audio = document.getElementById(id);
play = function(){
audio.load();
audio.play();
};
$('.audiobtn').on("click",play);
}
}
</script>
</html>