<template>
? <div>
? ? <van-button type="primary" @click="created_page()">邀請(qǐng)函</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>
效果圖
