HTML canvas 元素接触检测

Question

我正在尝试制作一个具有静态效果的网站，但遇到了 canvas。在了解它时，我希望当特定元素超过笔画时字体颜色会发生变化。

对不起，如果我说得不对，我会用代码和图片给你看一个例子。

下图是我网站的首页，但由于是图片，所以很难说出我在说什么，但我想要的功能是当正弦图超过“欢迎”时，“欢迎” " 文本自动变为黑色，因此它给网站带来了更多的静态感觉。

这是我的代码

window.onload = () => {
    const canvas = document.querySelector(".canvas");
    const ctx = canvas.getContext("2d");

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

    window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    const wave = {
        y: canvas.height / 2 + 100,
        length: 0.0015,
        amplitude: 70,
        frequency: 0.01,
    };

    let increment = wave.frequency;

    const drawWave = () => {
        ctx.beginPath();
        ctx.moveTo(0, canvas.height / 2);
        ctx.fillStyle = "rgba(0,0,0,0.91)";
        for (let i = 0; i < canvas.width; i++) {
            ctx.lineTo(i, wave.y + Math.sin(i * wave.length + increment) * wave.amplitude);
        }

        increment += wave.frequency;
        ctx.lineTo(canvas.width, 0);
        ctx.lineTo(0, 0);
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.fill();
    };

    const animate = () => {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawWave();
    };

    animate();
    window.addEventListener("click", (e) => {
        console.log(e);
        console.log(e.x, e.y);
    });
};

body {
    margin: 0;
    padding: 0;
}
.intro {
    position: absolute;
    width: 100%;
    height: 100vh;
}
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
h1 {
    text-align: center;
    color: white;
}
canvas {
    position: absolute;
    z-index: -1;
}

p {
    color: white;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <link rel="stylesheet" href="css/app.css" />
        <script src="test.js" defer></script>
    </head>
    <body>
        <div>
            <div class="intro">
                <div class="content">
                    <h1>Welcome</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ratione eveniet ipsam, doloremque sequi rem. Ab accusamus laboriosam distinctio commodi nemo, excepturi ipsam
                        aperiam fugiat voluptatibus veritatis asperiores assumenda delectus.
                    </p>
                </div>
            </div>
            <canvas class="canvas"></canvas>
        </div>
        <script type="text/javascript" src="dat.gui.min.js"></script>
    </body>
</html>

如有任何帮助或建议，我们将不胜感激。不得不说，这canvas事情做起来并不容易：/

Answer 1

您可以尝试使用 css blend modes

这应该有效：

body {
  background: white;
}

h1 {
    color: white;
    mix-blend-mode: difference;
}

p {
    color: white;
    mix-blend-mode: difference;
}

编辑：混合混合模式而不是混合模式

HTML canvas 元素接触检测

HTML canvas element contact detection

html

javascript

trigonometry

canvas