HTML画布元素接触检测答案

【问题标题】：HTML canvas element contact detectionHTML画布元素接触检测
【发布时间】：2023-03-24 23:35:01
【问题描述】：

我正在尝试制作一个具有静态效果的网站，但我遇到了画布。在了解它的过程中，我希望在特定元素超过笔划时改变字体颜色。

对不起，如果我没有意义，我会给你一个带有代码和图片的例子。

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

这是我的代码

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的东西搞起来不容易：/

【问题讨论】：

标签： javascript html canvas trigonometry

【解决方案1】：

您可以尝试使用 css blend modes

这应该可行：

body {
  background: white;
}

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

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

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

【讨论】：

不，不起作用:(
我刚刚更新了答案，应该是混合混合模式。见codepen.io/luroc/pen/eYENeNE
非常感谢您的帮助，但是当白色区域越过文本时，文本仍然是白色的……还是我们在看两个不同的东西？ :(
哦，等一下，我将 canvas css 更改为 background-color: white 并且它有效！非常感谢您的帮助:)
哦，是的，我忘了我在代码笔中设置了body {background: white;}（我还不知道它会有所作为，吸取的教训:)）