新增海报生成页、H5端流程大致走通，差抽奖验证的逻辑，以及海报元素的对应关系

src/plugins/index.js

@@ -433,7 +433,7 @@ export function mostValue(arr) {
 
 
 // 海报生成
-export function posterCreate(option, imageArr) {
+export function posterCreate(option, imageArr, textArr, theme) {
     let posterUrl = ''
     const { width, height } = option
     Toast.loading({
@@ -441,12 +441,13 @@ export function posterCreate(option, imageArr) {
         duration: 0,
         forbidClick: true
     })
+    console.log('theme', theme);
 
     let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素 
     let ctx = mycanvas.getContext('2d')
     mycanvas.width = width; //设置canvas的宽
     mycanvas.height = height; //设置canvas的高
-
+    console.log('imgs:', imageArr);
     //Promise对象加载资源
     let loader_p = [];
     imageArr.map((item) => {
@@ -469,6 +470,39 @@ export function posterCreate(option, imageArr) {
                 ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
             })
 
+            // 画签文
+            ctx.rotate(-4 * (Math.PI / 180));
+            ctx.textAlign = 'start'; //type2
+            ctx.textBaseline = 'top'
+            textArr.map((item, index) => {
+                const { x, y } = textArr[index].style.pos
+                ctx.font = textArr[index].style.font; // normal bold
+
+                // title绘制描边
+                if (index == 0) {
+                    ctx.lineWidth = 5
+                    ctx.strokeStyle = 'white'
+                    ctx.strokeText(textArr[index].content, x, y);
+                }
+
+
+                ctx.fillStyle = textArr[index].style.color ? textArr[index].style.color : theme; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
+                ctx.fillText(textArr[index].content, x, y); //绘制文字
+            })
+
+            // let mbtiLogo = 'MBTI MBTI MBTI'
+            // let radius = 75
+            // var angleStep = ((3 / 4) * Math.PI) / mbtiLogo.length;
+            // for (var i = 0; i < mbtiLogo.length; i++) {
+            //     var angle = i * angleStep + Math.PI / 250;
+            //     var x = 375 + Math.cos(angle) * radius;
+            //     var y = 775 + Math.sin(angle) * radius;
+            //     ctx.font = 'normal 30px HYYakuHei';
+            //     ctx.fillStyle = theme
+            //     ctx.fillText(mbtiLogo[i], x, y);
+            // }
+
+
             //海报绘制完 ，转成图片对象
             return mycanvas.toDataURL('image/jpeg', 1);
         })
@@ -476,7 +510,11 @@ export function posterCreate(option, imageArr) {
             //返回的图片地址，就是最后海报的地址，可以放在DOM显示
             let posterImg = document.querySelector('#poster')
             posterImg.src = baseURL
-            setTimeout(() => Toast.success({ message: '已成功' }), 500)
+            setTimeout(() => {
+                Toast.success({ message: '生成成功！' })
+                gsap.to('.posterPop', { duration: 0.5, autoAlpha: 1 })
+
+            }, 500)
         })
 
     return posterUrl