canvas画20坐标点

原创已于 2023-04-18 10:07:13 修改 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

于 2023-04-14 23:12:32 首次发布

该代码段展示了如何在Vue.js组件中利用HTML5CanvasAPI生成20个随机坐标点并绘制到画布上。首先获取Canvas元素和2D渲染上下文，然后通过循环创建坐标点，并用arc方法画出圆点，最后将坐标点数据存储到组件的数据属性pointsdata中。

<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>