Javascript 背景动画Vue Js/ES6

我试图在我的webapp上插入我的背景动画，但我遇到了此消息错误

Cannot set property 'width' of null

我的web应用程序在Vue JS 2上。我创建了一个模板标签，里面有一个画布标签

<template>
  <canvas>
    <GlobalView></GlobalView>
  </canvas>
</template>

在脚本标记内，在导出默认方法之后，我插入了动画：

<script>
  import GlobalView from '@/GlobalView'

  export default {
    name: 'App',
    components: {
      GlobalView
    }
  }

  const canvas = document.querySelector('canvas')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  const c = canvas.getContext('2d')
  const colors = ['#E0FBFC', '#FF5964', '#FFFFFF', '#38618C', '#C2DFE3']
  function Circle (x, y, r, dx, dy, color) {
    this.x = x
    this.y = y
    this.r = r
    this.dx = dx
    this.dy = dy

    this.draw = function () {
      c.beginPath()
      c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)
      c.fillStyle = color
      c.fill()
      if (this.y + this.r >= innerHeight || this.y - this.r <= 0) {
        this.dy = -this.dy
      }
      if (this.x + this.r >= innerWidth || this.x - this.r <= 0) {
        this.dx = -this.dx
      }
      this.x += this.dx
      this.y += this.dy
    }
  }

  const circles = []
  for (let i = 0; i < 10; i++) {
    const r = (Math.random() * 30) + 10
    const x = Math.random() * (innerWidth - r * 2) + r
    const y = Math.random() * (innerHeight - r * 2) + r
    const dx = (Math.random() - 0.5)
    const dy = (Math.random() - 0.5)
    const color = colors[Math.floor(Math.random() * colors.length)]
    const circle = new Circle(x, y, r, dx, dy, color)
    circles.push(circle)
  }
  const drawCircle = () => {
    requestAnimationFrame(drawCircle)
    c.clearRect(0, 0, innerWidth, innerHeight)
    circles.forEach((circle) => {
      circle.draw()
    })
  }

  drawCircle()
  canvas.addEventListener('click', (e) => {
    for (let i = 0; i < 5; i++) {
      const r = (Math.random() * 30) + 10
      const dx = (Math.random() - 0.5)
      const dy = (Math.random() - 0.5)
      const color = colors[Math.floor(Math.random() * colors.length)]
      circles.push(new Circle(e.pageX, e.pageY, r, dx, dy, color))
    }
  })

  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  })
</script>

从“@/GlobalView”导入GlobalView
导出默认值{
名称：“应用程序”，
组成部分：{
环球视野
}
}
const canvas=document.querySelector（'canvas'）
canvas.width=window.innerWidth
canvas.height=window.innerHeight
const c=canvas.getContext（'2d'）
常量颜色=['#E0FBFC'、'#FF5964'、'#FFFFFF'、'#38618C'、'#C2DFE3']
函数圆（x、y、r、dx、dy、颜色）{
这个。x=x
这个。y=y
这个。r=r
this.dx=dx
this.dy=dy
this.draw=函数（）{
c、 beginPath（）
c、 弧（this.x，this.y，this.r，0，Math.PI*2，false）
c、 填充样式=颜色
c、 填充（）
如果（this.y+this.r>=innerHeight | | this.y-this.r=innerWidth | | this.x-this.r{
requestAnimationFrame（drawCircle）
c、 clearRect（0，0，innerWidth，innerHeight）
圆。forEach（（圆）=>{
画圆
})
}
画圈（）
canvas.addEventListener（'click'，（e）=>{
for（设i=0；i<5；i++）{
常数r=（Math.random（）*30）+10
常量dx=（Math.random（）-0.5）
常数dy=（Math.random（）-0.5）
const color=colors[Math.floor（Math.random（）*colors.length）]
圆。推送（新圆（e.pageX，e.pageY，r，dx，dy，color））
}
})
window.addEventListener（'resize'，（）=>{
canvas.width=window.innerWidth
canvas.height=window.innerHeight
})

它似乎不认识width、getContext甚至clearRect等javascript方法

谢谢您的帮助。

当然不行，因为您不使用方法并调用它，
Of course it won't work, because you do not use methods and call it,

  <script>
  import GlobalView from '@/GlobalView'

  export default {
    name: 'App',
    components: {
      GlobalView
    },
    methods: {
        canvas () {
             const canvas = document.querySelector('canvas')
             canvas.width = window.innerWidth
             canvas.height = window.innerHeight
           ....
        }
    }
  }

//and then, call it,, vm = new Vue()
vm.canvas();
</script>

从“@/GlobalView”导入GlobalView
导出默认值{
名称：“应用程序”，
组成部分：{
环球视野
},
方法：{
画布（）{
const canvas=document.querySelector（'canvas'）
canvas.width=window.innerWidth
canvas.height=window.innerHeight
....
}
}
}
//然后，将其命名为，、vm=new Vue（）
vm.canvas（）；

您的代码将在模块编译过程中运行，甚至在文档中出现任何远程内容之前。您真的想将其添加到类似的

挂载的
中吗*