使用画布让鼠标更加绚丽

最新推荐文章于 2020-09-29 00:45:54 发布

hellolipop

最新推荐文章于 2020-09-29 00:45:54 发布

阅读量76

点赞数

分类专栏： demo 绚丽小球文章标签：绚丽鼠标移动

demo 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

绚丽小球

1 篇文章 0 订阅

订阅专栏

使用canvas让客户拥有更加舒适的体验
鼠标动态创建出彩色的小球，觉得丑的大哥们，自己复制完改改就行了，比如说你喜欢的小心心。这只是个简单的小样，要是想变得更加炫酷就需要开动你的小脑经来完善咯。
在使用时记得下载underscore,这是给新手玩的所以会存在一些兼容性问题，还存在着一些小bug，有空的时候会进行完善，第一次到csdn还是很激动的^ V ^

移动鼠标动态创建小球

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
        }

       
    </style>
    <title>小球</title>
</head>

<body>
    <canvas id="canvas">当前浏览器版本过低，请更新浏览器</canvas>
    <script src="./underscore.js"></script>
    <script src="./jquery.min.js"></script>
    <script>
        //获取当前画布
        const canvas = document.getElementById('canvas')
        //设置画布样式
        const ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        canvas.style.background = '#000'
        
        //创建小球类
        class Ball {
            //构造器
            constructor(x, y, color) {
                this.x = x
                this.y = y

                this.color = color
                this.r = 40
            }
            //绘制小球
            render() {
                ctx.save()
                ctx.beginPath()
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
                ctx.fillStyle = this.color
                ctx.fill()
                ctx.restore()
            }
        }
        //创建会移动的小球类
        class MoveBall extends Ball {
            constructor(x, y, color) {
                super(x, y, color)
                this.dX = _.random(-5, 5)
                this.dY = _.random(-5, 5)
                this.dR = _.random(1, 3)
            }
            upDate() {
                this.x += this.dX
                this.y += this.dY
                this.r -= this.dR
                if (this.r < 0) {
                    this.r = 0
                }
            }
        }

        //实例化小球
        let ballArr = []
        let colorArr = ['red', 'yellow', 'blue', 'pink', 'green', 'orange']

        //监听鼠标移动事件
        canvas.addEventListener('mousemove', (e) => {
            // let e = e || event
            let ball = new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)])
            ballArr.push(ball)
            console.log(ballArr);
        })
        //开启定时器
        setInterval(() => {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            for (let i = 0; i < ballArr.length; i++) {
                ballArr[i].render()
                ballArr[i].upDate()
            }
        }, 50)

    </script>
</body>

</html>

hellolipop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用画布让鼠标更加绚丽

使用canvas让客户拥有更加舒适的体验鼠标动态创建出彩色的小球，觉得丑的大哥们，自己复制完改改就行了，比如说你喜欢的小心心。这只是个简单的小样，要是想变得更加炫酷就需要开动你的小脑经来完善咯。在使用时记得下载underscore,这是给新手玩的所以会存在一些兼容性问题，还存在着一些小bug，有空的时候会进行完善，第一次到csdn还是很激动的^ V ^<!DOCTYPE html&g...
复制链接

扫一扫

专栏目录