canvas浮动动画

最新推荐文章于 2024-07-26 18:00:00 发布

Carrie_zzz

最新推荐文章于 2024-07-26 18:00:00 发布

阅读量1.2k

点赞数

分类专栏：前端小案例合集前端特效文章标签： canvas 前端案例原型链 JS

本文链接：https://blog.csdn.net/Carrie_zzz/article/details/79590181

版权

这篇博客介绍了如何使用HTML5 canvas创建一个鼠标浮动动画，当鼠标经过小球时，小球会变大，离开时则缩小。文章通过一系列步骤详细讲解了实现这一效果的过程，包括画布初始化、浏览器尺寸监听、随机数生成、小球对象封装、原型链应用、小球生成、运动方法添加、边界判断、鼠标事件处理等关键环节。同时，推荐了两个实用网站，一个用于选取颜色，另一个为前端开发者提供工作机会。

摘要由CSDN通过智能技术生成

大致效果
这里写图片描述

总结：就是有很多的小球，当我们鼠标划过的时候小球就变大，当鼠标移走的时候小球就会变小。关于颜色我们可以去这个网站：http://www.peise.net/。在这里查找好看的颜色。前端面试找工作建议去这个网站：https://www.lagou.com/。

（1）首先写个画布即canvas

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

（2）让canvas铺满整个画布，就要获得浏览器的宽度和高度

    var w = window.innerWidth;
    var h = window.innerHeight;

（3）由于浏览器随时会变大变小于是我们监控浏览器的大小然后改变canvas的大小

window.onresize = function() {
            w = window.innerWidth;
            h = window.innerHeight;
            canvas.width = w;
            canvas.height = h;
        }

(4)整个过程大量的需要随机数于是我们封装一个函数用于货的随机数

function random(min, max) { //返回一个Min到max的值
            return Math.random() * (max - min) + min;
        }

（5）整个过程有很多的小球。于是我们面向对象我们封装一个小球（我们知道一个小球都有哪些属性然后把他们封装在一个对象中）

function Bubble() {
   
        }

（6）我们都知道一个人是有基因链于是就相当于小球的原型链于是：

        Bubble.prototype = {
            init: function() {
   
                this.x = random(0, w); //泡泡生成的x的位置
                this.y = random(0, h);
                this.r = random(3, 5);
                this