vue 引入canvas_如何canvas效果直接引入到vue中？

想用一个网上现成的canvas效果引入到vue中，不知道为何失效，求大神解答，代码直接用是可以运行的，不知道怎么引到vue中使用

var wave = (function () {

var ctx

var waveImage

var canvasWidth

var canvasHeight

var needAnimate = false

function init (callback) {

var wave = document.getElementById('wave')

var canvas = document.createElement('canvas')

if (!canvas.getContext) return

ctx = canvas.getContext('2d')

canvasWidth = 200

canvasHeight = 200

canvas.setAttribute('width', canvasWidth)

canvas.setAttribute('height', canvasHeight)

wave.appendChild(canvas)

waveImage = new Image()

waveImage.onload = function () {

waveImage.onload = null

callback()

}

waveImage.src = '../images/wave.png'

}

function animate () {

var waveX = 0

var waveY = 0

var waveXmin = -203

var waveYmax = canvasHeight * 0.7

var requestAnimationFrame =

window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.msRequestAnimationFrame ||

funct