• canvas 的一些效果


    <html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background:green;
            }
            #div{
                position: absolute;
                z-index: -1;
                top:0;
            }
        </style>
    </head>
    <body>
    <div id="div" style=" 100%;height:100%">
        
    </div>
    
    <script>
    var canvas  = document.createElement('canvas');
    canvas.setAttribute('id', 'canvas');
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    div.appendChild(canvas);
    var canvas = document.getElementById('canvas');
    var particles = [];
    var tick = 0;
    var lineRadius = 100;
    
    function loop() {
        createParticles();
        updateParticles();
        killParticles();
        drawParticles();
        drawLine();
    }
    
    function createParticles() {
        //check on every 10th tick check
        if(tick % 10 == 0) {
            if(particles.length < 100) {
                particles.push({
                        x: Math.random()*canvas.width,
                        y: 0,
                        speed: 2+Math.random()*3, //between 2 and 5
                        radius: 5+Math.random()*5, //between 5 and 10
                        color: "white",
                        speed_x:Math.random()>=.5?-Math.random()*3:Math.random()*3
                });
            }
        }
    }
    
    function updateParticles() {
        for(var i in particles) {
            var part = particles[i];
            part.y += part.speed;
            part.x += part.speed_x;
            
        }
    }
    function killParticles() {
        for(var i in particles) {
            var part = particles[i];
            if(part.y > canvas.height) {
                part.y = 0;
            }
            if(part.x >= canvas.width||part.x<=0) {
                part.x = Math.random()*canvas.width;
            }
        }
    }
    function drawLine(){
    	for(var i in particles){
    		var part_i = particles[i];
    		for (var j in particles){
    			if(j>i){
    				var part_j = particles[j];
    				if(square(part_i.x-part_j.x)+square(part_i.y-part_j.y)<=square(lineRadius)){
    					var c = canvas.getContext('2d');
    					c.beginPath();
    					c.lineWidth = .3;
    					c.strokeStyle = "white";
    					c.moveTo(part_i.x, part_i.y);
    					c.lineTo(part_j.x,part_j.y);
    					c.stroke();
    					c.closePath();
    				}
    			}else continue;
    		}
    	}
    }
    function square(x){
    	return x*x;
    }
    function drawParticles() {
        var c = canvas.getContext('2d');
        c.fillStyle = "green";
        c.globalAlpha = 0.1;
        c.fillRect(0,0,canvas.width,canvas.height);
        for(var i in particles) {
            var part = particles[i];
            var radialGradient = c.createRadialGradient(part.x,part.y,part.radius/4,part.x,part.y,part.radius);
            radialGradient.addColorStop(0,'rgba(255,255,255,.8)');
            radialGradient.addColorStop(.5,'rgba(255,255,255,.5)');
            radialGradient.addColorStop(1,'rgba(255,255,255,.3)');
            c.beginPath();
            c.arc(part.x,part.y, part.radius, 0, Math.PI*2);
            c.closePath();
            c.fillStyle = radialGradient;
            c.fill();
        }
    }
    
    setInterval(loop,30);
    
    </script>
    </body>
    </html>
    

      这个

    globalAlpha很有意思,设置值时移动的 小点会出现 尾巴,值越小 尾巴越长,像.....
  • 相关阅读:
    第一个vbscript程序
    判定VBscript方法是否存在
    我的模块加载系统 v24
    libnet/libnids库函数介绍
    程序员应知道的12件事
    基于poll实现的echo服务器
    师者
    OSI/RM参考模型和TCP/IP协议的关系
    TCP(虚电路)和UDP的区别
    python中 __name__及__main()__的妙处
  • 原文地址:https://www.cnblogs.com/xingst/p/5198107.html
Copyright © 2020-2023  润新知