배경 애니메이션 Vue Js/ES6

Question

webapp에 배경 애니메이션을 삽입하려고했지만이 메시지 오류가 발생했습니다.

:

Cannot set property 'width' of null 

내 웹 응용 프로그램은 내 스크립트 태그 내부

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

내부 캔버스 태그와 템플릿 태그를 생성하고 수출 기본 방법 후 내 애니메이션을 삽입 뷰 JS 2에

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

너비, getContext 또는 심지어 clearRect와 같은 javascript 메서드를 인식하지 못하는 것으로 보입니다.

도움 주셔서 감사합니다.

Answer 1

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>