canvas连线

最新推荐文章于 2024-11-19 14:36:46 发布
薄荷糖丷微微凉
最新推荐文章于 2024-11-19 14:36:46 发布
阅读量655
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/rui512777/article/details/53642401
<!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>