Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-14.3333) is negative.

[Faizjj]

• 你当前是什么框架(必填)：nuxt3

• 你使用的是哪个包(必填)：@lucky-canvas/vue

• 你当前插件的版本(必填)：^0.1.11

• 当前环境是小程序还是浏览器(选填)：浏览器

• 详细描述你的bug：使用router.push()时会报下面的错误：Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-14.3333) is negative.通过location的方式跳转正常

• 问题代码(重要)：问题代码在下面

// 代码开始, 别再放歪了行吗
<script setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount } from "vue";

const luckyShow = ref(true);
const luckyBox = ref();
const prizes = ref([]);
const blocks = ref([
  {
    padding: "33px 38px 38px",
  },
]);
const buttons = ref([
  {
    x: 1,
    y: 1,
    background: "rgb(0, 114, 248)",

    borderRadius: "15px",
    fonts: [
      {
        text: "1 chances per play",
        top: "30%",
        fontSize: "14px",
        fontColor: "#ffffff",
      },
    ],
  },
]);

onMounted(() => {
  prizes.value = [
    {
      x: 0,
      y: 0,
      background: "#ffffff",
      borderRadius: "15px",
      imgs: [
        {
          src: "https://img.askstarry.com/banner1678953080231.jpg",
          width: "50%",
          top: "10%",
        },
      ],
      fonts: [
        {
          text: "12V 6Ah Battery",
          top: "70%",
          fontColor: "#FE9829",
          fontSize: "10px",
        },
      ],
    },
    {
      x: 1,
      y: 0,
      background: "#ffffff",
      borderRadius: "15px",
      imgs: [
        {
          src: "https://img.askstarry.com/banner1682246542463",
          width: "50%",
          top: "10%",
        },
      ],
      fonts: [
        {
          text: "12V 6Ah Battery",
          top: "70%",
          fontColor: "#FE9829",
          fontSize: "10px",
        },
      ],
    },
    { x: 2, y: 0, background: "#ffffff", borderRadius: "15px" },
    { x: 2, y: 1, background: "#ffffff", borderRadius: "15px" },
    { x: 2, y: 2, background: "#ffffff", borderRadius: "15px" },
    { x: 1, y: 2, background: "#ffffff", borderRadius: "15px" },
    { x: 0, y: 2, background: "#ffffff", borderRadius: "15px" },
    { x: 0, y: 1, background: "#ffffff", borderRadius: "15px" },
  ];
});
const Lucky = ref();
const startCallback = () => {
  Lucky.value.play();
};
const endCallback = () => {
  Lucky.value.stop(0);
};
</script>
<template>
  <div class="lucky">
    <div ref="luckyBox" class="lucky__turntable">
      <LuckyGrid
        v-if="luckyShow"
        ref="Lucky"
        class="LuckyGrid"
        :prizes="prizes"
        :blocks="blocks"
        :defaultStyle="{ background: '#b8c5f2' }"
        :buttons="buttons"
        :active-style="{
          background: 'rgb(255, 206, 152)',
        }"
      ></LuckyGrid>
    </div>
    <button @click="startCallback">开始抽奖</button>
    <button @click="endCallback">结束抽奖</button>
  </div>
</template>
<style scoped lang="scss">
.lucky {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  .lucky__turntable {
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--ask-db-margin);
    .LuckyGrid {
      width: 700px;
      height: 700px;
      background: url("./image/lucky.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
<style>
.number {
  color: red;
}
</style>

// 代码结束

[vividwang]

当这个width是100%的时候，zhe ge这个值就是负数，导致这个问题，给个具体的宽度，比如300px就ok了

[JieHaoCai]

当这个width是100%的时候，zhe ge这个值就是负数，导致这个问题，给个具体的宽度，比如300px就ok了

不行的