dos

Public/static/js/common.js

@@ -61,13 +61,29 @@ let answerArr = [];
 // 已经进入的题目
 let watchedQuestion = [1];
 //结果
-let resultType = 0;
+let resultType = 1;
+
+//记录初始状态下fontsize
+const fontSize = parseFloat($('html').css('fontSize'));
+
+//canvas 位置
+let canvasArr = [
+    [23, 120, 607, 907],
+    [29, 120, 582, 874],
+    [29, 120, 582, 874],
+    [29, 120, 603, 904],
+    [29, 120, 582, 870],
+    [29, 120, 582, 904],
+    [29, 120, 582, 904],
+    [29, 120, 595, 906]
+];
 
 //海报canvas
 let posterCanvas;
 let posterCtx;
 
 $(document).ready(function () {
+    createPoster();
     $("input").on("blur", function () {
         window.scroll(0, 0); //失焦后强制让页面归位
     });
@@ -119,6 +135,24 @@ $(document).ready(function () {
     });
 });
 
+function createPoster() {
+    $('.poster-canvas-block').css({
+        'width': pxToRem(canvasArr[resultType][2]) + 'rem',
+        'height': pxToRem(canvasArr[resultType][3]) + 'rem',
+        'top': pxToRem(canvasArr[resultType][1]) + 'rem',
+        'left': pxToRem(canvasArr[resultType][0]) + 'rem',
+    })
+    //海报canvas定义
+    let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', designPxToRealPx(canvasArr[resultType][2]), designPxToRealPx(canvasArr[resultType][3]), true);
+    posterCanvas = canvasinfo[0];
+    posterCtx = canvasinfo[1];
+    let posterImg = new Image();
+    posterImg.src = 'http://maf.dev.izhida.cn/Public/static/image2/poster' + resultType + '.png';
+    posterImg.onload = function () {
+        posterCtx.drawImage(posterImg, 0, 0, posterCanvas.width, posterCanvas.height);
+    }
+}
+
 function submitAnswer() {
     if (nowAnswer !== '') {
         if (answerArr[0] == 0) {
@@ -278,4 +312,8 @@ function RandomNumBoth(Min, Max) {
 
 function pxToRem(px) {
     return (px / 20) * fontSize;
+}
+
+function designPxToRealPx(px) {
+    return px / 20 * fontSize;
 }
\ No newline at end of file