day-7-星空连线

最新推荐文章于 2021-02-03 17:18:39 发布

铭心NTeen

最新推荐文章于 2021-02-03 17:18:39 发布

阅读量222

点赞数 1

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/qq_25238675/article/details/103476711

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

项目示例：

项目实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
	body{
		}
        * {
            margin: 0;
            padding: 0;
        }
        canvas {
            display: block;
            background: #000;
        }
    </style>
</head>
<body>
<canvas id='canvas'></canvas>

<script>
    /*
    *  画布和浏览器等宽等高
    *  画布中一共有200个小点
    *
    *  每个小圆点的基础信息有
    *       1. 水平位置x
    *       2. 竖直位置y
    *       3. 圆点的半径r
    *       4. 圆点的水平速度speedX
    *       5. 圆点的竖直速度speedY
    *
    *
    *  如何判断两点之前是否连线
    *  当两个点之间的距离小于某个值（自定义）的时候  两点之间就连线
    * */

    function myCanvas(num){
        //获取画布
        this.ele = document.getElementById('canvas')
        //获取画笔
        this.cxt = this.ele.getContext('2d')

        //设置画布的宽高
        // this.ele.width = window.innerWidth;
        // this.ele.height = window.innerHeight

        this.handleResize()
        //记录小圆点的个数
        this.num = num;
        //存储200个小圆点的信息
        this.data = [];
        //记录鼠标是否移动
        this.isMoved = false;
        this.init();
    }


    myCanvas.prototype = {
        init() {
            this.saveData()
            this.move()

            document.addEventListener('mousemove',this.handleMouse.bind(this))
            window.addEventListener('resize',this.handleResize.bind(this))
        },
        handleResize(){
            this.ele.width = window.innerWidth;
            this.ele.height = window.innerHeight
        },
        handleMouse(e){
            //鼠标移动时 改变isMoved属性
            this.isMoved = true;
            var x1 = e.clientX;
            var y1 = e.clientY;
            for(var i=0;i<this.num;i++){
                var x2 = this.data[i].x;
                var y2 = this.data[i].y;
                if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) <= 120 * 120) {
                    //两点之间连线
                    this.line(x1, y1, x2, y2)
                }
            }

        },
        saveData() {
            for (var i = 0; i < this.num; i++) {
                this.data.push({
                    x: Math.random() * window.innerWidth,
                    y: Math.random() * window.innerHeight,
                    r: Math.random() * 2 + 1,
                    //水平速度  -0.5,0.5
                    speedX:Math.random()-0.5,
                    speedY:Math.random()-0.5
                })
            }
        },
        //绘制圆形
        circle(x, y, r) {
            this.cxt.beginPath();
            this.cxt.fillStyle = 'pink'
            this.cxt.arc(x, y, r, 0, Math.PI * 2)
            this.cxt.closePath();
            this.cxt.fill()
        },
        line(x1, y1, x2, y2) {
            this.cxt.beginPath()
            var color = this.cxt.createLinearGradient(x1, y1, x2, y2)
            color.addColorStop(0, '#333');
            color.addColorStop(1, this.isMoved?'red':'green');
            this.cxt.strokeStyle = color;
            this.cxt.lineWidth = 2;
            this.cxt.moveTo(x1, y1)
            this.cxt.lineTo(x2, y2)
            this.cxt.closePath()
            this.cxt.stroke()
        },
        //让小圆点运动
        move(){
            setInterval(this.draw.bind(this),20)
        },
        draw() {

            this.isMoved = false;
            //清除画布
            this.cxt.clearRect(0,0,window.innerWidth,window.innerHeight)
            for (var i = 0; i < this.num; i++) {
                var x1 = this.data[i].x;
                var y1 = this.data[i].y;
                var r1 = this.data[i].r;
                //绘制圆形
                this.circle(x1, y1, r1)
                for (var j = i + 1; j < this.num; j++) {
                    var x2 = this.data[j].x;
                    var y2 = this.data[j].y;
                    var r2 = this.data[j].r;
                    if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) <= 60 * 60) {
                        //两点之间连线
                        this.line(x1, y1, x2, y2)
                    }
                }
                //更新小圆点的圆心坐标
                this.data[i].x += this.data[i].speedX;
                this.data[i].y += this.data[i].speedY;

                //边界检测
                if(this.data[i].x<=0||this.data[i].x>=window.innerWidth){
                    this.data[i].speedX = -this.data[i].speedX
                }

                if(this.data[i].y<=0||this.data[i].y>=window.innerHeight){
                    this.data[i].speedY = -this.data[i].speedY
                }
            }
        }
    }

    var heaven = new myCanvas(200)
</script>
</body>
</html>