vue 使用原生canvas_用vue实现H5之canvas海报分享

实现大致相同，以下列出关键代码：

xml

js

获取canvas和context

// 获取canvas

getCanvas() {

let canvas = document.getElementById('share-poster')

canvas.width = 510

canvas.height = 868

return canvas

},

// 获取图形上下文context

getCxt(canvas) {

return canvas.getContext('2d')

},

加载网络图片

// 加载图片

loadImg(url) {

return new Promise((resolve, reject) => {

let img = new Image()

// 允许跨域

img.setAttribute('crossOrigin', 'Anonymous')

img.onload = () => {

resolve(img)

}

img.onerror = () => {

this.$showToast('图片下载失败')

}

img.src = url

})

},

其它绘制代码与uni-app中使用一样