canvas鼠标在屏幕上的互动效果实现

最新推荐文章于 2025-05-21 07:42:19 发布

水星梦月

最新推荐文章于 2025-05-21 07:42:19 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/monparadis/article/details/121015814

这篇博客介绍了一个使用HTML5 Canvas实现的鼠标跟随动画，当鼠标移动时，会生成随机颜色和大小的圆圈，并逐渐增大直至消失，提供了一种动态视觉效果的实现方法。通过requestAnimationFrame实现平滑的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先我们需要整屏画布（你也可以随机设置）

2.想要鼠标经过的时候有大小圆圈跟着鼠标动，故需要创建一个类来装圆的属性：随机的圆唯一的标识（id我这里用index），坐标(x, y),半径r，颜色color（因为要很多圆需要一个数组来装，上面变量中自行添加）

3.圆的所有属性有了，我想要把它画出来，故创建一个方法

4.以上基本工作就做完了，因为我希望圆跟着我的鼠标运动，故需要过去鼠标移动过程中的坐标

5.接下来就需要做动画了，为了保证画面的流畅这里使用了requestAnimationFrame方法（备注很详尽）

6.调用啊

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var ctx = document.getElementById('canvas')
            context = ctx.getContext('2d')
            Width = document.documentElement.clientWidth
            Height = document.documentElement.clientHeight
            ctx.width = Width
            ctx.height = Height
            color = 55
            rounds = []
        function Round_item (index, x, y, r, color) {
            this.index = index
            this.x = x
            this.y = y
            this.r = r
            this.color = 'hsl('+ color +',100%,80%)'
        }
        Round_item.prototype.draw = function () {
            context.fillStyle = this.color
            context.beginPath()
            context.arc(this.x, this.y, this.r, 0, 2*Math.PI, false)
            context.closePath()
            context.fill()
        }
        window.onmousemove = function (event) {
            rounds.push({
                x: event.clientX,
                y: event.clientY,
                r: 3,
            })
        }
        function animate () {
            // 清空画布
            context.clearRect(0, 0, Width, Height)
            for (let i = 0; i < rounds.length; i ++) {
                // 半径每次增大0.9
                rounds[i].r += 0.9
                // 由于hsl的颜色范围是1-360
                if (color > 360) {
                    color = 55
                }
                // 颜色变化
                color += 0.1
                rounds[i] = new Round_item(i, rounds[i].x, rounds[i].y, rounds[i].r, color)
                rounds[i].draw()
                // 圆的半径大于10就在下一次勾勒得时候消失
                if (rounds[i].r > 10) {
                    rounds.splice(i, 1)
                }
            }
            requestAnimationFrame(animate)
        }
        animate()
    </script>
</body>
</html>

我学习的地址主要是菜鸟教程以及掘金，然后班门弄斧一下，有问题就指出哈，初学者一起加油