SOURCE

class Ball {
    constructor () {
        this.x = 0
        this.y = 0
        this.radius = 10
        this.color = 'pink'
        this.scaleX = 1
        this.scaleY = 1
    }
    draw (context) {
        context.save()
        context.translate(this.x, this.y)
        context.scale(this.scaleX, this.scaleY)
        context.fillStyle = this.color
        context.beginPath()
        context.arc(0, 0, this.radius, 0, Math.PI * 2, true)
        context.closePath()
        context.fill()
        context.restore()
    }
}

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

canvas.width = window.innerWidth
canvas.height = window.innerHeight


let angle = 0
const speed = 0.05
const range = 0.2
const centerScale = 1
const ball = new Ball()
ball.radius = 40
ball.x = canvas.width / 2
ball.y = canvas.height / 2


function drawFrame () {
    requestAnimationFrame(drawFrame)
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // Math.sin(angle) 的值从0增长到1再下降到-1
    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range
    ball.draw(ctx)

    angle+=speed
}

drawFrame()

<canvas id="canvas"></canvas>

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}