canvas 绘制图片 在图片基础上绘制其他形状

参考https://www.jb51.net/html5/718228.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

  /* 生成图片 */
      generateImg() {
        console.log("generateImg")
        let img = new Image();
        img.crossOrigin='anonymous' //设备跨域的问题
        img.onload = () => this.generateImg2(img)
        img.src = this.imgMap;
      },
      /*图片加载完成后*/
      generateImg2(img) {
        console.log("generateImg2", img.width, img.height)
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = "#f00";
        ctx.moveTo(75, 50);
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.stroke()
        this.imgurl = canvas.toDataURL("image/png"); //img的src属性值
         },