canvas路线图 vue_vue-canvas 画图

邀请函

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);

}

}

}

}

})

}

}

}

效果图