使用canvas绘制基础线条和图片，文字等

<div class="box" >
    <canvas id="cont" width="1200px" height="900px"
    >您的浏览器版本过低，请升级浏览器</canvas
  >

如果画线条的画总共有7步

  /*canvas只能使用原生js来操作*/
        /*
        1、获取画布
        2、获取画布上下文
        3、开始一条路径
        4、确定起始点
        5、确定结束点
        6、着色
        7、结束路径
        */
        //第一步 获取dom元素
        let canvas = document.querySelector('#cont');
        //第二步 获取画布上下文  就是让你有能画上去的能力
        let ctx = canvas.getContext('2d');
        //第三步 开始一条路径
        ctx.beginPath();
        //第四步 确定起始点
        ctx.moveTo(100, 100);
        //第五步 确定结束点
        ctx.lineTo(400, 400);
        //第六步 开始上颜色
        ctx.stroke();
        //第七步 关闭路径
        ctx.closePath();

如果你画完一条线还有东西要画，第七步不用写

画图片和线条

 //第一步 获取dom元素
        let canvas = document.querySelector("#cont");
   //第二步 获取画布上下文  就是让你有能画上去的能力
        let ctx = canvas.getContext("2d");
          // 这是自己写的图片的方法
          //图片参数 1位置和宽高 2. 图片路径 3，文字参数，不需要文字不传
      imgFn([drawer.x, drawer.y, drawer.w, drawer.h], "./img/1.png", [
          "xx变压器",
          0,
          drawer.h + 20,
        ]);
            // 绘制图片的方法
        function imgFn(arr, str, textArr) {
          var img = new Image(); //创建img元素
          img.onload = function () {
            // 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，height
            ctx.drawImage(img, ...arr);
          };
          img.src = str; //设置图片源地址
          // 如果需要文字   //画文字
          if (textArr) {
            ctx.font = "20px 微软雅黑";
            ctx.fillText(...textArr);
          }
        }


画线条

  drawLine(
          drawer.w + 10,
          drawer.h / 2,
          drawer.w + 10 + 250,
          drawer.h / 2,
          "#000",
          1,
          [result[0].lineName, drawer.w + 100, drawer.h / 2 - 10]
        );
 /**
         * 画直线
         * @Pparam x1   起始位置x
         * @Pparam y1   起始位置y
         * @Pparam x2   结束位置x
         * @Pparam y2   结束位置y
         * @Pparam color    线颜色
         * @Pparam width    线宽度
         */

        function drawLine(x1, y1, x2, y2, color, width, textArr) {
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.strokeStyle = color;
          ctx.lineWidth = width;
          ctx.stroke();
          ctx.closePath();
          if (textArr) {
            ctx.font = "20px 宋体";
            ctx.fontWeight = "400";
            ctx.fillText(...textArr);
          }
        }
    }