欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas之背景特效

程序员文章站 2022-09-26 19:40:02
需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 ......

需具备js基础知识以及canvas相关方法(可查阅相关文档)

下面是一篇有关js与canvas的背景特效

基于面向过程的思维

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas {
            display: block;
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        window.requestAnimationFrame =(function(){//解决定时器卡问题,使用帧动画
            return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    function(callback){
                        window.setInterval (callback,1000/60);
                    };
        })();
        //初始化变量
        var canv=document.getElementsByName("canvas");
        var cxt=canvas.getContext("2d");
        var w,h;
        var num=200;
        var data=[];
        var move={};
        window.onresize=init;//在浏览器窗口变化时重置
        init();
        //获取浏览器宽高并使粒子随机分布
        function init(){
            canvas.width = window.innerWidth ;
            canvas.height = window.innerHeight ;
            w = canvas.width;
            h = canvas.height;
            for(var i=0;i<num;i++){
                data[i]={x:Math.random()*w,y:Math.random()*h,cX:Math.random()*0.6-0.3,cY:Math.random()*0.6-0.3};
                Cricle(data[i].x,data[i].y);
            }
        }
        //绘制粒子
        function Cricle(x,y){
            cxt.save();
            cxt.fillStyle ="pink";
            cxt.beginPath ();
            cxt.arc (x,y,0.5,Math.PI*2,false);
            cxt.closePath ();
            cxt.fill ();
            cxt.restore ();
        }
        //自执行使粒子运动
        !function draw(){
            cxt.clearRect(0,0,w,h);//清除,防止粒子运动成线
            for(var i=0;i<num;i++){
                data[i].x+=data[i].cX;//粒子运动
                data[i].y+=data[i].cY;
                if(data[i].x>w||data[i].x<0) data[i].cX=-data[i].cX;//设置边界值判断防止粒子跑出边界
                if(data[i].y>h||data[i].y<0) data[i].cY=-data[i].cY;
                Cricle(data[i].x,data[i].y);
                for(var j=i+1;j<num;j++){
                    //使粒子连线
                    if((data[i].x-data[j].x)*(data[i].x-data[j].x)+(data[i].y-data[j].y)*(data[i].y-data[j].y)<=50*50){
                        line(data[i].x,data[i].y,data[j].x,data[j].y,false);
                    }
                    //使粒子与鼠标连线
                    if(move.x){
                        if((data[i].x-move.x)*(data[i].x-move.x)+(data[i].y-move.y)*(data[i].y-move.y)<=100*100){
                            line(data[i].x,data[i].y,move.x,move.y,true);
                        }
                    }
                }
            }
            window.requestAnimationFrame(draw);//定时器
//            setInterval(function(){
//                draw();
//            },130);
        }();
        //使粒子的连线颜色渐变
        function line(x1,y1,x2,y2,isMove){
            var color=cxt.createLinearGradient(x1,y1,x2,y2);
            if(!isMove){
                color.addColorStop(0,"yellow");
                color.addColorStop(1,"pink");
            }else{
                color.addColorStop(0,"#fff");
                color.addColorStop(1,"#0bd2dd");
            }
            cxt.save();
            cxt.strokeStyle=color;
            cxt.beginPath();
            cxt.moveTo(x1,y1);
            cxt.lineTo(x2,y2);
            cxt.stroke();
            cxt.restore();
        }
        //鼠标移入与粒子连线
        document.onmousemove=function(e){
            move.x= e.clientX;
            move.y= e.clientY;
        }
    </script>
</body>
</html>