canvas简单动画案例（圆圈闪烁渐变动画）

傷城~ 2022-03-17 08:20 921阅读 0赞

> canvas的第二篇博客，终于开始做动画了，不得不说，canvas是真的强，虽然写起来不是那么顺手，但是实现的东西真的让我很满意。

实现效果：

![20190223095545217.gif][]

主要思想：随机画出圆圈，然后利用计时器动态重绘，实现圆圈的变化，动态移除；

代码如下，注释已写：

<!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">
        <title>Document</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
                background-color: black;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
        // 圆圈动画
        // 面向对象开发
        var animate={
            screen_w:document.documentElement.clientWidth,//获取显示区域的宽高 定义以后需要的变量
            screen_h:document.documentElement.clientHeight,
            content2d:null,
            x:null,
            y:null,
            r:10,
            Hz:0,
            arc:[],
            randomloc:function(){//随机 x y 坐标
                var x=Math.floor(Math.random()*this.screen_w);
                var y=Math.floor(Math.random()*this.screen_h);
                return[x,y];
            },
            randomcolor:function(){//随机颜色（16777216=256*256*256）
                return '#'+parseInt(Math.random()*16777216).toString(16);//16进制颜色
            },
            draw:function(){//画出圆圈
                this.x=this.randomloc()[0];
                this.y=this.randomloc()[1];
                this.content2d.beginPath();//开始画图
                var color=this.randomcolor();
                this.content2d.strokeStyle=color;
                this.content2d.arc(this.x,this.y,this.r,0,Math.PI*2);
                this.content2d.stroke();//闭合线圈
                this.content2d.closePath();//结束画图
                this.arc.push(
                    [this.x,this.y,this.r,color,0]
                );//arc储存所有的圆圈的坐标半径和颜色
            },
            // 初始化
            init:function(){
                var canvas=document.getElementById('canvas');//获取canvas元素
                canvas.width=this.screen_w;//画布大小为屏幕显示大小
                canvas.height=this.screen_h;
                this.content2d=canvas.getContext('2d');//2d模式
            },
            // 圆圈动画，删除圆圈（相当于动态改变半径值重绘）
            update:function(){
                for(var i=0;i<this.arc.length;i++){
                    //清除当前的圆圈
                    this.content2d.clearRect(this.arc[i][0]-this.arc[i][2]-1,this.arc[i][1]-this.arc[i][2]-1,this.arc[i][2]*2.2,this.arc[i][2]*2.2);
                    this.content2d.beginPath();
                    var color=this.arc[i][3];
                    this.content2d.strokeStyle=color;
                    this.arc[i][2]++;//半径增加
                    if(this.arc[i][2]>20){//如果半径大于20，执行计数器，当计数器大于4时，移除当前圆圈
                        this.arc[i][2]=10;
                        this.arc[i][4]++;
                        if(this.arc[i][4]>4){
                            this.arc.splice(i,1);
                            i--;
                            continue;
                        }
                    }
                    this.content2d.arc(this.arc[i][0],this.arc[i][1],this.arc[i][2],0,Math.PI*2);//重绘
                    this.content2d.stroke();
                    this.content2d.closePath();
    
                }
            }
        }
        animate.init();
        window.requestA=(function(){// h5计时器 利用屏幕刷新率刷新，性能很好，此为兼容性写法
            return window.requestAnimationFrame ||
                    webkitRequestAnimationFrame ||
                    mozRequestAnimationFrame ||
                    msquestAnimationFrame||
                    function(callback){
                        setTimeout(callback,1000/60);
                    }
            
        })();
        (function loop(){//自执行函数，动态绘图
            window.requestA(loop);
            animate.Hz++;
            if(animate.Hz>1){
                animate.Hz=0;
                animate.draw();
                animate.update();
            }
        })();
        </script>
    </body>
    </html>

不留个言嘛~

[20190223095545217.gif]: /images/20220317/75299a06aea54d7090188f1845126e73.png