canvas画20坐标点

<template>
  <div>
    <!-- canvas画图形成20坐标点 -->
    {{ pointsdata }}
    <canvas id="myCanvas" width="400" height="400"></canvas>
  </div>
</template>  
  
<script>
export default {
  data() {
    return {
      pointsdata: [],
    };
  },
  created() {
    // 获取Canvas元素和绘图对象
  },
  mounted() {
    this.huizhituixing();
  },
  methods: {
    huizhituixing() {
      // 定义坐标点数组
      var c = document.getElementById("myCanvas");
      var cxt = c.getContext("2d");
      var points = [];

      cxt.beginPath();
      for (var i = 0; i < 20; i++) {
        // 横坐标
        const x = Math.random() * 400;
        // 纵坐标
        const y = Math.random() * 400;
        // 大小
        const z = 5;
        // 是否连线，连线宽度
        const d = 0;
        cxt.arc(x, y, z, d, Math.PI * 2, true);
        points.push({
          x: x,
          y: y,
        });
        cxt.closePath();
        cxt.fill();
      }

      this.pointsdata = points;
    },
  },
};
</script>  
  
<style scoped>
canvas {
  border: 1px solid black;
}
</style>