canvas连线

来源：互联网发布：12芯三网合一网络箱编辑：程序博客网时间：2024/04/27 16:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{ margin:0px; padding:0px; font-family: "Microsoft YaHei"}        a{text-decoration: none}        a img{display: block; border: none}        li{list-style: none}        #goudan{            background-color: #000;            display: block;        }    </style>    <script src="jquery.min.js"></script></head><body>   <!-- 默认300*150-->    <canvas id="goudan" width="100%" height="400px"></canvas></body>    <script>        var canvas = document.getElementById('goudan');        var ctx = canvas.getContext('2d');        var w  = canvas.width = window.innerWidth;        var h  = canvas.height = window.innerHeight;        var num = 200;        //        var data = [];//定义一个数组存储初始坐标        for(var i = 0;i<200;i++){            data[i] = {};            //random的值范围(0,1]            data[i].x = Math.random()*w;            data[i].y = Math.random()*h;            //点在屏幕上循环一次的移动的距离 随机数2、-2            data[i].cX = Math.random()*4-2;            data[i].cY = Math.random()*4-2;            //圆心坐标x,y  半径  弧度  逆时针            var x = Math.random()*w;            var y = Math.random()*h;           Circle(x,y);        }        //画圆        function Circle(x,y){            ctx.fillStyle = 'pink';            ctx.beginPath();            ctx.arc(x,y,0.3,0,2*Math.PI,true);            ctx.closePath();            ctx.fill();        }        //画线        function Line(x1,y1,x2,y2){            //渐变色            var lin = ctx.createLinearGradient(x1,y1,x2,y2);            lin.addColorStop(0,'#9900ff');            lin.addColorStop(0,'#00ffff');            ctx.strokeStyle = lin;            //路径            ctx.moveTo(x1,y1);            ctx.lineTo(x2,y2);            //画            ctx.stroke();        }        //将函数编程函数表达式 加+  -  （）都可以        ~function  draw(){            //console.log('哈哈哈');            //把页面中的内容擦干净            ctx.clearRect(0,0,w,h);            for(var i = 0;i<200;i++){                //data[i].x = data[i].x+data[i].cX;               // data[i].y = data[i].y+data[i].cY;                data[i].x += data[i].cX;                data[i].y += data[i].cY;                //如果移动到屏幕左边 移动距离cx变成负数                //一行判断可以不用加大括号 紧跟在后边                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;                Circle(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);                    }                }            }            window.requestAnimationFrame(draw);        }();        //画线 知道两点的x,y左边 可以用勾股定理求出两点距离        //css3代替定时器的东西        //window.requestAnimationFrame();        //画线        //左上角(0,0)  右下角(canvas.width,canvas.height)        //样式        //ctx.strokeStyle = 'pink';        //路径        //ctx.moveTo(0,0);        //ctx.lineTo(w,h);        //画        //ctx.stroke();        //画圆        //ctx.fillStyle = 'pink';        //ctx.strokeStyle = 'pink';        //圆心坐标x,y  半径  弧度  逆时针        //ctx.arc(100,100,50,0,2*Math.PI,true);        //ctx.stroke();        //ctx.fill();    </script></html>
0 0