<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>
效果图
