不移動弧/圓？ - javascript

Question

const canvas = document.getElementById('canvas')
const c = canvas.getContext('2d')

let frameRate = 100

function displayInCanvas() {
    c.beginPath() // keep this

    this.radius = 20
    this.diameter = this.radius * 2
    this.x = canvas.width / 2
    this.y = canvas.height / 2
    this.xVel = 15
    this.yVel = 15

    if (x + diameter >= canvas.width || x <= diameter) {
        xVel = xVel * -1
    }

    c.arc(x, y, this.radius, 0, Math.PI * 2)
    x += xVel
    y += yVel

    c.stroke() // keep this
}

setInterval(function() {
    canvas.width = window.innerWidth / 1.5 // keep from here to "chicken boy"
    canvas.height = window.innerHeight / 1.5

    canvas.style.position = 'absolute'
    canvas.style.left = '15%'
    canvas.style.top =  '15%'
    displayInCanvas() // chicken boy
}, frameRate)

Answer 1

你應該改變，

this.xVel = 15;
this.yVel = 15;

使圓圈移動。

 const canvas = document.getElementById('canvas') const c = canvas.getContext('2d') let frameRate = 1000 / 60 function displayInCanvas(x, y) { c.beginPath() // keep this this.radius = 20 this.diameter = this.radius * 2 this.x = canvas.width / 2 this.y = canvas.height / 2 this.xVel = x this.yVel = y if (x + diameter >= canvas.width || x <= diameter) { xVel = xVel * -1 } c.arc(x, y, this.radius, 0, Math.PI * 2) x += xVel y += yVel c.stroke() // keep this } let x = 15; let y = 15; setInterval(function() { canvas.width = window.innerWidth / 1.5 // keep from here to "chicken boy" canvas.height = window.innerHeight / 1.5 canvas.style.position = 'absolute' canvas.style.left = '15%' canvas.style.top = '15%' displayInCanvas(x, y) // chicken boy x++; y++; }, frameRate)

 <canvas id="canvas">