canvas浮动动画

这篇博客介绍了如何使用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值