PC 生成 canvas 图片

<canvas ref="test" id="myCanvas11" width="600" height="250" style="border:1px solid #ff0000;"> </canvas>

<el-button @click="test">下载</el-button>

// methods:

　　test() {
      let imgFormat = ‘png‘;
      let nowDate = new Date();
      let timestamp = `${nowDate.getFullYear()}${nowDate.getMonth() + 1}${nowDate.getDate()}${nowDate.getHours()}${nowDate.getMinutes()}${nowDate.getSeconds()}`;
      let imgName = `${timestamp}.${imgFormat}`;
      let canvas = this.$refs.test;
      let quality = 1;
      let imgData = canvas.toDataURL(`image/${imgFormat}`, quality).replace(`image/${imgFormat}`, ‘image/octet-stream‘);
      let link = document.createElement(‘a‘);
      link.href = imgData;
      link.download = imgName;
      link.click();
    },
//mounted() 初始化
    init() {
      let canvas = document.getElementById(‘myCanvas11‘);
      let context = canvas.getContext(‘2d‘);
      context.beginPath();
      // 设置是个顶点的坐标，根据顶点制定路径
      for (let i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 50 + 200,
          -Math.sin((18 + i * 72) / 180 * Math.PI) * 50 + 200);
        context.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 20 + 200,
          -Math.sin((54 + i * 72) / 180 * Math.PI) * 20 + 200);
      }
      context.closePath();
      // 设置边框样式以及填充颜色
      context.lineWidth = ‘3‘;
      context.fillStyle = ‘pink‘;
      context.strokeStyle = ‘wheat‘;
      context.fill();
      context.stroke();
    },