微信H5测试答题抽奖

通过答题参与抽奖活动。

• 根据用户选择的答案给出一个测评等级或系统评价

如图：

思路很简单：

• 得到相应的题目和答案

$(jason).each(function (j,e) {
    let jason=(that.data[i].answer)[j];
    let keys = [];
    for (let p1 in jason) {
        if (jason.hasOwnProperty(p1))
            keys.push(p1);
        }
    $(".list").append('
'+keys[0]+''+jason[keys[0]]+'
')
});

获取题目答案信息时，通过循环选项避免出现多选题的情况

• 选择答案记录得分
• 根据得分给出系统评价
• canvas实现截图功能

var cntElem = $('.show')[0];
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: width, //dom 原始宽度
    height: height,
    useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
    var context = canvas.getContext('2d');
    // 【重要】关闭抗锯齿
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    // 【重要】默认转化的格式为png,也可设置为其他格式
    var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);
    document.body.appendChild(img);
    $(img).css({
         "width": canvas.width / 2 + "px",
         "height": canvas.height / 2 + "px",
         "position":"fixed",
         "top":"0",
         "left":"0",
         "opacity":"0",
         "z-index":'222',
         'display':'none'
     }).addClass('f-full');
});

小白菜一枚，欢迎指正(〃‘▽’〃)
效果预览：https://bestjhh.github.io/answer/
完整代码：https://github.com/bestjhh/answer