vue-canvas 画图

<template>

  <div>

    <van-button type="primary" @click="created_page()">邀请函</van-button>

    <van-popup v-model="show">

      <div style="width:375px;height:570px">

        <canvas id="mycanvas" width="375" height="570"></canvas>

      </div>

    </van-popup>

  </div>

</template>

<script>

export default {

  name: "ambm",

  data () {

    return {

      show: false

    }

  },

  methods: {

    created_page () {

      this.show = true

      this.$nextTick(() => {

        var canvas = document.getElementById("mycanvas");

        var context = canvas.getContext("2d");

        var imgbg = new Image();

        imgbg.src = "https://static.360myb.com/image/goods_img/20180910/1c027600ea165b3762fb58f02341d1dc.jpg"

        var imgcode = new Image();

        imgcode.src = "http://assets.huayupiaowu.com/static/team/2019/0606/15597969991480.jpg"

        imgbg.onload = function () {

          console.log(imgbg.complete)

          if (imgbg.complete) {

            context.drawImage(imgbg, 0, 0, 375, 570);

            context.fillText("Hello World", 10, 50);

            imgcode.onload = function () {

              if (imgbg.complete) {

                context.drawImage(imgcode, 100, 200, 50, 50);

              }

            }

          }

        }

      })

    }

  }

}

</script>

<style scoped>

</style>

效果图