画布重叠问题bug修复

src/views/material/lease/outBound/index.vue

@@ -574,7 +574,7 @@
       <div slot="footer" class="dialog-footer" style="text-align: center">
         <el-button type="primary" @click="handleExportCheck">导出</el-button>
         <el-button type="primary" @click="printCheck">打 印</el-button>
-        <el-button @click="openPrint = false">关 闭</el-button>
+        <el-button @click="closeDialogAndRefresh">关 闭</el-button>
       </div>
     </el-dialog>
 
@@ -959,7 +959,6 @@ export default {
   created() {
     this.getList();
   },
-
   methods: {
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -1183,8 +1182,6 @@ export default {
 
       this.printTableData = res.data.leaseOutVoList;
       setTimeout(() => {
-        // 清除画布内容
-        this.clearCanvas();
         this.chapter('机具检验专用章', this.checkDataInfo.leaseUnit)
       }, 200);
       this.openPrint = true;
@@ -1200,16 +1197,6 @@ export default {
       );
     },
 
-    // 清除画布内容的方法
-    clearCanvas() {
-      const canvas = document.getElementById("canvas");
-      if (canvas) {
-        const context = canvas.getContext("2d");
-        context.clearRect(0, 0, canvas.width, canvas.height);
-      }
-    },
-
-
     //打开领料单
     async handleLld(row) {
       this.open = true;
@@ -1286,12 +1273,18 @@ export default {
     printView() {
       // this.$refs.remarksPrintRef.print();
     },
+    // 关闭弹窗并刷新页面
+    closeDialogAndRefresh() {
+      this.openPrint = false;
+    },
+
     chapter(text, companyName) {
-
     let canvas = document.getElementById("canvas");
-    if(canvas){
     let context = canvas.getContext("2d");
-  
+    canvas.width = canvas.width;
+    context.height = canvas.height;
+    // // 清除画布内容
+    // context.clearRect(0, 0, canvas.width, canvas.height);
     //let text = "XXX专用章";
     //let companyName = "XXX科技股份有限公司";
   
@@ -1305,7 +1298,7 @@ export default {
     context.stroke();
   
     //画五角星
-    create5star(context, width, height, 20, "#f00", 0);
+    this.create5star(context, width, height, 20, "#f00", 0);
   
     // 绘制印章名称
     context.font = "14px 宋体";
@@ -1336,9 +1329,10 @@ export default {
       context.strokeText(c, 0, 0); // 此点为字的中心点
       context.restore();
     }
+  },
   
     //绘制五角星
-    function create5star(context, sx, sy, radius, color, rotato) {
+    create5star(context, sx, sy, radius, color, rotato) {
       context.save();
       context.fillStyle = color;
       context.translate(sx, sy); //移动坐标原点
@@ -1358,11 +1352,7 @@ export default {
       context.fill();
       context.restore();
     }
-  }
   },
-  },
-
-
 
   watch: {
     $route: {