: 背景展示

src/views/index/index.vue

@@ -40,7 +40,7 @@
             第六视角
           </button> -->
         </div>
-        <pie ref="zutai" :backgroundImage="pic1"> </pie>
+        <pie ref="zutai"  :width="200" :height="400":backgroundImage="pic1"> </pie>
       </el-col>
     </el-row>
   </div>
@@ -128,4 +128,4 @@ export default {
   font-size: 20px;
   color: #000000;
 }
-</style>
\ No newline at end of file
+</style>

src/views/makePie/index.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div class="canvas-container">
-      <!-- <img :src="background" alt="Background" style="width: 100%; height: 100%; position: absolute;z-index: 1; "> -->
+      <!-- <img :src="backgroundImage" alt="Background" :style="{width: width,height:height,position:'absolute',zIndex:11}"> -->
       <canvas
         ref="canvas"
         :width="width"
@@ -362,13 +362,12 @@ export default {
       return `rgb(${r}, ${g}, ${b})`
     },
     drawBackground() {
-      const canvas = this.$refs.canvas;
-      const ctx = canvas.getContext('2d');
-      const image = new Image();
-      image.src = this.background; // 设置你的图片路径
-      image.onload = () => {
-        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-      };
+      const image = new Image()
+      image.src = this.backgroundImage // 设置你的图片路径
+      const self = this
+      image.onload = function () {
+        self.ctx.drawImage(image, 0, 0, self.width, self.height)
+      }
     },
     // 清除所有
     clearAll() {