0
webappにバックグラウンドアニメーションを挿入しようとしましたが、このメッセージエラーに直面しています。バックグラウンドアニメーションVue Js/ES6
:Cannot set property 'width' of null
私のウェブアプリは、私は私のスクリプトタグ内
<template>
<canvas>
<GlobalView></GlobalView>
</canvas>
</template>
の内側にキャンバスタグをテンプレートタグを作成し、輸出デフォルトの方法の後に、私は私のアニメーションを挿入Vueの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>
width、getContext、またはclearRectなどのjavascriptメソッドを認識していないようです。
ありがとうございました。
モジュールのコンパイル時にコードが実行され、リモートで文書に表示される前に実行されます。あなたは本当に「Vueライフサイクルフック」(https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks)のように 'mounted'のように追加したいと思っています – Phil
こんにちはフィル、ありがとう今はまし。 5 * – BeeLee