文字重叠 javascript

Question

我正在制作一个网站，我正在制作一个单独移动鼠标 x 的文本，所以我创建了这个简单的 JavaScript 程序：

var context;
function setup(){
    createCanvas(displayWidth-50,displayHeight-200);
}
function draw(){
    textSize(75);
    fill("white");
    text("Dev Rohit",mouseX , displayHeight/2);
}

这个问题是我移动鼠标的时候文字重叠了（之前那个没有消失）请帮我解决这个问题。谢谢！

旁注：我正在使用 p5.js 库

Answer 1

这是基于评论中讨论的内容。

您不需要 canvas 来移动文本，因此只需创建一个 span 元素并使用 vanilla JS 来移动它。

const devRohit = document.getElementById("dev-rohit");

window.addEventListener("mousemove", (e) => {
  const x = e.clientX + window.pageXOffset; // The second part is for scrolling
  devRohit.style.left = `${x}px`;
})

#dev-rohit {
  user-select: none;
  position: relative;
  left: 0px;
  font-size: 75px;
  color: red;
}

<h1>This is some content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="https://www.webfx.com/blog/images/cdn.designinstruct.com/files/582-how-to-image-placeholders/generic-image-placeholder.png" alt="placeholder image" title="placeholder image" />
<div id="dev-rohit-container">
  <span id="dev-rohit">Dev Rohit</span>
</div>

文字重叠 javascript

Text overlapping in javascript

javascript

p5.js