canvas 重力

最新推荐文章于 2022-03-24 11:54:36 发布

围城少年

最新推荐文章于 2022-03-24 11:54:36 发布

阅读量168

点赞数

分类专栏： canvas 文章标签： canvas html5 js html css3

本文链接：https://blog.csdn.net/weixin_38201500/article/details/105478211

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        #canvas {
            border: 1px solid paleturquoise;
        }
    </style>
    <canvas id='canvas'></canvas>
</body>
<script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('canvas')
    canvas.width = window.innerWidth - 30
    canvas.height = window.innerHeight - 30
    let ctx = canvas.getContext('2d')
    let speed = 0.8 //速度
    let Friction = 0.9 //摩擦力
    function Ball(x, y, dx, dy, radius, color) {
        this.x = x
        this.y = y
        this.dx = dx
        this.dy = dy
        this.radius = radius
        this.color = '' + color
        this.draw = function () {
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false)
            ctx.fillStyle = this.color
            ctx.fill()
        }
        this.upload = function () {
            if (this.y + this.radius + this.dy + speed > canvas.height) {
                this.dy = -this.dy
                this.dy *= Friction
            } else {
                this.dy += 0.8
            }
            this.y += this.dy
            this.draw()
        }
    }
    let temparray;
    function init() {
        temparray = []
        for (i = 0; i < 1000; i++) {
            x = Math.random() * canvas.width
            y = Math.random() * canvas.height
            dx = (Math.random() - 0.5 * 2)
            dy = (Math.random() - 0.5 * 2)
            radius = Math.floor(Math.random() * 20)
            r = Math.random() * 255
            g = Math.random() * 255
            b = Math.random() * 255
            color = `rgb(${r},${g},${b})`
            temparray.push(new Ball(x, y, dx, dy, radius, color))
        }
    }
    function animate() {
        requestAnimationFrame(animate)
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        for (let b of temparray) {
            b.upload()
        }
    }
    init()
    animate()
    window.addEventListener('mousedown', function () {
        init()
    })
</script>

</html>