<!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">
<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="661px" height="812px">
您的浏览器不支持canvas标签。
</canvas>
<img class="bg" src="" alt="" crossorigin="anonymous">
<div class="baocun">
<p>长按图片保存并分享朋友圈</p>
<p>作为领奖凭证</p>
</div>
<a href="./awards.html" class="lingqu"></a>
<!--
<div class="lingqu">
<img src="../image/question/lingqu.png" alt="">
</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>
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;
alert(uid);
var avatar = user.avatar ? user.avatar : '';
var name = user.wechatName ? user.wechatName : '小朋友';
// var uid = 56;
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var data = {
"activityId": "2",
"answer": "",
"questionId": "",
"requestId": ""
}
var ind = 0;
function recursion() {
ajaxData("https://activity.lingjiao.cn/activity/activity/xx", uid, data, function(result){
if(result.code != 200) {
alert('题目已经答完了')
return false;
}
console.log(result)
var page = result.data.currentNum;
var length = result.data.questionNum;
if( page >= length && result.data.isEnd === 0) {
console.log('奖品', result.data.prize)
localStorage.setItem('prize', result.data.prize);
var prizeName = result.data.prizeName;
$('.popup').show();
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//回调地狱，可优化，暂时这样写
ctx.fillStyle = '#fff';
ctx.fillRect(0,0,661,812);
canvasImg(ctx, '../image/question/xx_02.png', 0, 0, '661', '812', function() {
ctx.fillStyle = '#000';
ctx.font = "bold 18px Arial";
alert(name);
alert(prizeName)
ctx.fillText(name,150,206);
ctx.fillText(prizeName + "等奖",200,258);
})
ctx.restore();
}
// 0.5s后生成图片
setTimeout(function() {
var dataURL = canvas.toDataURL("image/jpeg",1.0);
$('.bg').attr('src', dataURL)
}, 500)
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, page)
$('.question').eq(ind).children('ul').find('li').on('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(page + 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, page) {
var renders = '<div class="audio">' +
'<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);
$('.question').eq(ind).find('.ind').text(page);
}
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);
};
}
}
</script>
</html>