canvas畫不規則圖形

<template>
  <div class="test" style="position: relative;">
    <canvas id="myCanvas" ref="myCanvas"  width="460" height="240">
    您的瀏覽器不支持 HTML5 canvas 標籤。
    </canvas>
        <div class="myslot">
             <slot></slot>
        </div>
	</div>
</template>

<script>
export default {
    name:"",
  components: {},
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {
    init(){
    // var c=document.getElementById("myCanvas");
    // let canvas = document.getElementById("myCanvas");
    const canvas = this.$refs.myCanvas
    console.log(canvas)
    var ctx = canvas.getContext("2d");
    //460*240
	ctx.beginPath(); 
	ctx.moveTo(0,240); //l-豎線
	ctx.lineTo(0,60);	//l-斜線-s
	ctx.lineTo(30,0); //l-斜線-e
    ctx.lineTo(320,0); //t-橫線
	ctx.lineTo(350,30);//r-斜線
	ctx.lineTo(460,30);//r-橫線
	ctx.lineTo(460,150);//r-豎線
    ctx.lineTo(460,220);//r-b-斜線-s
    ctx.lineTo(440,240);//r-b-斜線-e
	// ctx.lineTo(0,240);
    var gnt1 = ctx.createLinearGradient(0, 0, 200, 100); //線性漸變的起止座標
    gnt1.addColorStop(1, '#5DB2BA'); //創建漸變的開始顏色，0表示偏移量，相對位置，最大爲1
    ctx.lineWidth = 2;
    ctx.strokeStyle = gnt1;

    // ctx.fillStyle="#B8DEEC";
	// ctx.fill();
    // ctx.clearRect(0,0,20,20)
    
    ctx.closePath();
    ctx.stroke();
    
    ctx.beginPath(); 
	ctx.moveTo(20,200);
	ctx.lineTo(20,60);
    ctx.lineTo(40,20);
    
    ctx.stroke();
    
    ctx.beginPath(); 
    ctx.moveTo(340,0); //r-t-斜線-s
	ctx.lineTo(360,20);
	ctx.lineTo(460,20);
    ctx.stroke();

	
    
   
      }
  },
  created() {
     
  },
  mounted() {
       this.init()
  }
};
</script>
<style lang="scss" scoped>
	.myslot{
		position: absolute;
        top: 20px;
        left: 48px;
        // width: 163px;
        height: 69px;
        color: #00d8db;
        // background: #5DB2BA;
		}
</style>