Canvas绘制图片

<el-row>

        <el-button type="primary" @click="clickOne"

          >点位1,3,5,7,9(空心圆)</el-button

        >

        <el-button type="primary" @click="clickTwo"

          >点位2,4,6,8(实心圆)</el-button

        >

        <el-button type="primary" @click="clickThree"

          >点位1,2,3(矩形)</el-button

        >

        <el-button type="primary" @click="handleClear"

          >清空</el-button

        >

      </el-row>

<canvas id="myCanvas" width="400" height="400"></canvas>

points: [

        // 上面第一行

        {

          x: 200,

          y: 60,

          location: 1,

        },

        // 上面第二行

        {

          x: 128,

          y: 120,

          location: 6,

        },

        {

          x: 272,

          y: 120,

          location: 9,

        },

        // 正中间一行三个点

        {

          x: 200,

          y: 200,

          location: 5,

        },

        {

          x: 60,

          y: 200,

          location: 2,

        },

        {

          x: 340,

          y: 200,

          location: 4,

        },

        //下面倒数第二排

        {

          x: 128,

          y: 280,

          location: 7,

        },

        {

          x: 272,

          y: 280,

          location: 8,

        },

        //下面倒数第一排

        {

          x: 200,

          y: 340,

          location: 3,

        },

      ],

clickOne() {

      let arr = [1, 3, 5, 7, 9];

      this.changePoint(arr, "kx");

    },

    clickTwo() {

      let arr = [2, 4, 6, 8];

      this.changePoint(arr, "sx");

    },

    clickThree() {

      let arr = [1, 2, 3];

      this.changePoint(arr, "rectangle");

    },

    changePoint(arr, type) {

      let pointArr = [];

      arr.forEach((item) => {

        let indexValue = this.points.findIndex((i) => i.location == item);

        pointArr.push(this.points[indexValue]);

      });

      this.drawPoints(pointArr, type);

    },

    //清除画布

    handleClear(){

      var myCanvas = document.querySelector("#myCanvas");

      /*获取绘图工具*/

      var ctx = myCanvas.getContext("2d");

      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); //先清空之前画的画布

    },

    drawPoints(data, type) {

      var myCanvas = document.querySelector("#myCanvas");

      /*获取绘图工具*/

      var ctx = myCanvas.getContext("2d");

      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

      /*

        1. 设置坐标点的中心圆点位置（x0，y0）

        2. 设置坐标点的大小  dotSize

        3. 计算坐标点的上下左右四角的点坐标

      */

      // 设置坐标点的大小  dotSize

      var dotSize = 10;

      // 4.遍历点的坐标,以及绘画点

      data.forEach(function (item, i) {

        console.log("i = " + i + ", x = " + item.x + ", y = " + item.y);

        // 1. 设置坐标点的中心圆点位置（x0，y0）

        var x0 = item.x;

        var y0 = item.y;

        // 2.计算坐标点的上下左右四角的点坐标: 左上(x1,y1) 左下(x2,y2) 右上(x3,y3) 右下(x4,y4)

        var x1 = Math.floor(x0 - dotSize / 2);

        var y1 = Math.floor(y0 - dotSize / 2);

        var x2 = Math.floor(x0 - dotSize / 2);

        var y2 = Math.floor(y0 + dotSize / 2);

        var x3 = Math.floor(x0 + dotSize / 2);

        var y3 = Math.floor(y0 - dotSize / 2);

        var x4 = Math.floor(x0 + dotSize / 2);

        var y4 = Math.floor(y0 + dotSize / 2);

        // 3.绘画坐标点

        ctx.beginPath();

        ctx.moveTo(x1, y1); // 左上点

        ctx.lineTo(x2, y2); // 左下点

        ctx.lineTo(x4, y4); // 右下点

        ctx.lineTo(x3, y3); // 右上点

        ctx.closePath();

        // 4.填充以及描边y轴

        if (type == "kx") {

          // 空心圆

          ctx.arc(x0, y0, 12, 0, 2 * Math.PI, true);

          ctx.fillStyle = "#fff";

          ctx.strokeStyle = "rgb(2, 112, 193)"; // 将线条颜色设置为蓝色

          ctx.lineWidth = "4";

          ctx.stroke();

          ctx.fill();

        } else if (type == "sx") {

          // 实心圆

          ctx.arc(x0, y0, 12, 0, 2 * Math.PI, true);

          ctx.fillStyle = "rgb(2, 112, 193)";

          ctx.fill();

        } else {

          // 矩形

          ctx.fillStyle = "#f00"; // 填充颜色为红色

          ctx.fillRect(x0-8, y0-13, 16, 26); // 绘制一个边长为 100 像素的红色矩形，左上角坐标为 (50, 50)

        }

      });

    },