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

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

实现效果：

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

代码如下，注释已写：

<!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>

不留个言嘛~

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

猜你喜欢