基于光标接近度的 HTML5 Canvas 元素颜色变化

Question

我正在为客户扩展 this HTML5 Canvas effect 并想进行调整，但是我对 Canvas 和 JS 的了解有限。

这是我的项目：http://tomicat.co/client/elle/globe-v2.html

我希望与光标“连接”的点像下面的样机一样简单地改变颜色。

代码：

// Draw dots
    var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var stars = [], // Array that contains the stars
    FPS = 60, // Frames per second
    x = 1000, // Number of stars
    mouse = {x: 0,y: 0};// mouse location
    
    // Push stars to array
    for (var i = 0; i < x; i++) {
    stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 2,
    vx: Math.floor(Math.random() * 30) - 15,
    vy: Math.floor(Math.random() * 30) - 15
    });
    }

    // Draw the scene
    function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.globalCompositeOperation = "lighter";
    for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.radius, 0, 6 * Math.PI);
    ctx.fill();
    ctx.fillStyle = "#dff92c";
    }

    ctx.beginPath();
    for (var i = 0, x = stars.length; i < x; i++) {
    var starI = stars[i];
    ctx.moveTo(starI.x,starI.y); 
    if(distance(mouse, starI) < 150) ctx.lineTo(mouse.x, mouse.y);
    for (var j = 0, x = stars.length; j < x; j++) {
      var starII = stars[j];
      if(distance(starI, starII) < 50) {
        //ctx.globalAlpha = (1 / 150 * distance(starI, starII).toFixed(1));
        ctx.lineTo(starII.x,starII.y);
      }
    }
    }
    ctx.lineWidth = 0.05;
    ctx.strokeStyle = 'white';
    ctx.stroke();
    }

    function distance( point1, point2 ){
    var xs = 0;
    var ys = 0;
    xs = point2.x - point1.x;
    xs = xs * xs;
    ys = point2.y - point1.y;
    ys = ys * ys;

    return Math.sqrt( xs + ys );
    }
    
    // Update star locations
    function update() {
    for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];

    s.x += s.vx / FPS;
    s.y += s.vy / FPS;

    if (s.x < 0 || s.x > canvas.width) s.vx = -s.vx;
    if (s.y < 0 || s.y > canvas.height) s.vy = -s.vy;
    }
    }

    canvas.addEventListener('mousemove', function(e){
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    });

    // Update and draw
    function tick() {
    draw();
    update();
    requestAnimationFrame(tick);
    }

    tick();

*, html, body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #222;
    overflow: hidden;
}
    
.globe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url("world-map-inverse.png");
    background-position: center;
    background-size: contain;
    background-color: transparent;
    pointer-events: none;
}
    
.text {
    z-index: 2;
    background: transparent;
    height: 100%;
    margin: 20px;
    width: 100%;
    position: absolute;
    resize: vertical;
    overflow: auto;pointer-events: none;
}
    
.title {
    font-family: 'Nunito Sans', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 72px;
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    background: transparent;
    color: white;
    text-align: center;
    padding: 20px;
    transform: translateY(-50%);
    resize: vertical;
    overflow: auto;
    pointer-events: none;
    text-shadow: 4px 3px 0px #c99182;
}
.highlight {
    background: transparent;
    color: #dff92c;
}

canvas {
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
}

<div class="text">
        <div class="title">Ellë Football Academy<br>
        <span class="highlight">Enjoy the Game</span></div>
    </div>
    <div class="globe"></div>
    <canvas id="canvas"></canvas>

提前致谢！

Answer 1

我简单地添加一个 if 来检查鼠标的距离并将点底着色：if(distance(mouse, s) < 150){ctx.fillStyle = "red";}else{ctx.fillStyle = "white";}

完整的例子：

// Draw dots
    var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var stars = [], // Array that contains the stars
    FPS = 60, // Frames per second
    x = 1000, // Number of stars
    mouse = {x: 0,y: 0};// mouse location
    
    // Push stars to array
    for (var i = 0; i < x; i++) {
    stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 2,
    vx: Math.floor(Math.random() * 30) - 15,
    vy: Math.floor(Math.random() * 30) - 15
    });
    }

    // Draw the scene
    function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.globalCompositeOperation = "lighter";
    for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];
     if(distance(mouse, s) < 150){ctx.fillStyle = "red";}else{ctx.fillStyle = "white";}
    
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.radius, 0, 6 * Math.PI);
    ctx.fill();
    ctx.fillStyle = "#dff92c";
    }

    ctx.beginPath();
    for (var i = 0, x = stars.length; i < x; i++) {
    var starI = stars[i];
    ctx.moveTo(starI.x,starI.y); 
    if(distance(mouse, starI) < 150) ctx.lineTo(mouse.x, mouse.y);
    for (var j = 0, x = stars.length; j < x; j++) {
      var starII = stars[j];
      if(distance(starI, starII) < 50) {
        //ctx.globalAlpha = (1 / 150 * distance(starI, starII).toFixed(1));
        ctx.lineTo(starII.x,starII.y);
      }
    }
    }
    ctx.lineWidth = 0.05;
    ctx.strokeStyle = 'white';
    ctx.stroke();
    }

    function distance( point1, point2 ){
    var xs = 0;
    var ys = 0;
    xs = point2.x - point1.x;
    xs = xs * xs;
    ys = point2.y - point1.y;
    ys = ys * ys;

    return Math.sqrt( xs + ys );
    }
    
    // Update star locations
    function update() {
    for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];

    s.x += s.vx / FPS;
    s.y += s.vy / FPS;

    if (s.x < 0 || s.x > canvas.width) s.vx = -s.vx;
    if (s.y < 0 || s.y > canvas.height) s.vy = -s.vy;
    }
    }

    canvas.addEventListener('mousemove', function(e){
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    });

    // Update and draw
    function tick() {
    draw();
    update();
    requestAnimationFrame(tick);
    }

    tick();

*, html, body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #222;
    overflow: hidden;
}
    
.globe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url("world-map-inverse.png");
    background-position: center;
    background-size: contain;
    background-color: transparent;
    pointer-events: none;
}
    
.text {
    z-index: 2;
    background: transparent;
    height: 100%;
    margin: 20px;
    width: 100%;
    position: absolute;
    resize: vertical;
    overflow: auto;pointer-events: none;
}
    
.title {
    font-family: 'Nunito Sans', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 72px;
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    background: transparent;
    color: white;
    text-align: center;
    padding: 20px;
    transform: translateY(-50%);
    resize: vertical;
    overflow: auto;
    pointer-events: none;
    text-shadow: 4px 3px 0px #c99182;
}
.highlight {
    background: transparent;
    color: #dff92c;
}

canvas {
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
}

<div class="text">
        <div class="title">Ellë Football Academy<br>
        <span class="highlight">Enjoy the Game</span></div>
    </div>
    <div class="globe"></div>
    <canvas id="canvas"></canvas>