canvas浮动动画

电玩女神 2022-05-29 04:53 135阅读 0赞

**大致效果**  
![这里写图片描述][Image 1]  
![这里写图片描述][Image 1]  
总结：就是有很多的小球，当我们鼠标划过的时候小球就变大，当鼠标移走的时候小球就会变小。关于颜色我们可以去这个网站：[http://www.peise.net/][http_www.peise.net]。在这里查找好看的颜色。前端面试找工作建议去这个网站：[https://www.lagou.com/][https_www.lagou.com]。

--------------------

（1）首先写个画布即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.color = colors[Math.floor(random(0, 3))];
                },
                draw: function() { 
                    ctx.beginPath();
                    ctx.fillStyle = this.color;
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                    ctx.fill();
                }
            }

（7）要生成很多的小球于是我么把生成小球的封装在一起：

function create() { 
                var bubble = new Bubble();
                bubble.init();
                bubble.draw();
            }
    
            for(var i=0;i<588;i++){ create(); }

（8）可以生成很多的小球以后我们还要让小球可以运动，于是我们在原型链上加上运动这一个方法。运动需要有 自己的速度，于是小球的属性当中又多了一条速度：

this.xr=random(-1,1);
    this.yr=random(-1,1); -------------------------------------------------------------
    move:function(){
     this.x+=this.xr;
     this.y+=this.yr;
     }

（9）由于canvas我们不能用dom获得.于是我们就无法获得每个小球的位置速度等等。但是我们可以在生成的时候把这些凶小球都存放刀数组中：

var bubbleArray=[];
            function create() { 
                var bubble = new Bubble();
                bubble.init();
                bubble.draw();
                bubbleArray.push(bubble);//生成一个就放刀数组中
            }

（10）运动于是我们少不了用setInterval：

setInterval(function(){ 
                ctx.clearRect(0,0,w,h);
                    for(var item of bubbleArray){
                        item.move();
                    }
                },1000/60);

（11）运动后我们需要做边界的判断，不然他跑着跑着都没有了。我们在运动的方法中添加判断

if(this.x-this.r<0||this.x+this.r>w||this.y-this.r<0||this.y+this.r>h){
                    this.xr=-this.xr;
                    this.yr=-this.yr;
                }

（12）做好以后我们就查鼠标移动上去的时候小球变化他的大小

//获得鼠标的位置
    canvas.onmousemove=function(){ 
                    var ev=ev||window.event;
                    pX=ev.clientX;
                    pY=ev.clientY;
                }

（13）获得之后我们就需要自己设置在鼠标的附近的多少的范围内小球会变化他的大小，然后做判断（别忘了放大后移走要变小)

--------------------

**最后代码如下**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> * { padding: 0; margin: 0; } canvas { background-color: antiquewhite; display: block; } </style>
        </head>
    
        <body>
            <canvas id="bubble"></canvas>
        </body>
        <script type="text/javascript"> var canvas = document.getElementById("bubble"); var w = window.innerWidth; var h = window.innerHeight; canvas.width = w; canvas.height = h; window.onresize = function() { w = window.innerWidth; h = window.innerHeight; canvas.width = w; canvas.height = h; } var ctx = canvas.getContext('2d'); var colors = ["#1db0b8", "#c7b3e5", "#e0803e"]; function random(min, max) { //返回一个Min到max的值 return Math.random() * (max - min) + min; } function Bubble() { } Bubble.prototype = { init: function() { this.x = random(0, w); //泡泡生成的x的位置 this.y = random(0, h); this.r = random(3, 5); this.color = colors[Math.floor(random(0, 3))]; this.xr=random(-1,1); this.yr=random(-1,1); this.Dis=40; this.vr=random(1,3); }, draw: function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fill(); }, move:function(){ this.x+=this.xr; this.y+=this.yr; if(this.x-this.r<0||this.x+this.r>w||this.y-this.r<0||this.y+this.r>h){ this.xr=-this.xr; this.yr=-this.yr; } this.xDis=Math.abs(pX-this.x); this.yDis=Math.abs(pY-this.y); if(this.xDis<this.Dis&&this.yDis<this.Dis&&this.r<this.Dis){ this.r+=this.vr; }else if(this.xDis>this.Dis&&this.yDis>this.Dis&&this.r>4){ this.r-=this.vr; } this.draw(); } } var bubbleArray=[]; function create() { var bubble = new Bubble(); bubble.init(); bubble.draw(); bubbleArray.push(bubble); } for(var i=0;i<588;i++){ create(); } setInterval(function(){ ctx.clearRect(0,0,w,h); for(var item of bubbleArray){ item.move(); } },1000/60); var pX,pY; canvas.onmousemove=function(){ var ev=ev||window.event; pX=ev.clientX; pY=ev.clientY; } </script>
    
    </html>

[Image 1]: 
[http_www.peise.net]: http://www.peise.net/
[https_www.lagou.com]: https://www.lagou.com/