HTML Canvas - 文本根据鼠标移动移动并显示后面的图层

Question

这将是一个简短的。基本上，我正在尝试重新创建本网站主页上显示的 Y - https://yalantis.com/.

没用过Canvas，对JS不是很熟练

我已经设法绘制了一个 canvas 并得到了我想要的形状和一个旋转动画，但我似乎无法找到解释 canvas 如何移动的来源在 yalantis 网站上。

这是我目前所做的：

var canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
// create mouse event listener
const mouse = { x: 0, y: 0 };
function mouseEvents(e) {
  const bounds = canvas.getBoundingClientRect();
  mouse.x = e.pageX - bounds.left - scrollX;
  mouse.y = e.pageY - bounds.top - scrollY;
}
document.addEventListener("mousemove", mouseEvents);

// draw design at x,y and rotated by angle
function drawRotated(x, y, angle) {
  ctx.setTransform(1, 0, 0, 1, x, y);
  ctx.rotate(angle);
  ctx.beginPath();
  // ctx.arc(0, 0, 100, 0, Math.PI * 2);
  // ctx.moveTo(-100, 0);
  // ctx.lineTo(100, 0);
  // ctx.lineTo(60, -80);
  // ctx.stroke();
  ctx.font = '600pt Rig Sans';
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'blue';
  ctx.strokeText('W', x, y);
  ctx.closePath();
  ctx.stroke();
}

// render loop called 60 times a second
function update(timer) {
  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
  ctx.clearRect(0, 0, 300, 300);

  // get angle from center to mouse
  var angle = Math.atan2(mouse.y - 150, mouse.x - 150);

  // draw rotated design
  drawRotated(150, 150, angle);
  requestAnimationFrame(update);
}
requestAnimationFrame(update);



  $('#canvas').attr('height', $(document).height());
  $('#canvas').attr('width', $(document).width());

尽管这也有点失败，因为它会在每次鼠标移动时复制自己并在一个奇怪的位置原地旋转。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

您可以通过绘制多个字母然后根据鼠标位置偏移它们来做类似的事情。

在鼠标位置，我将 x 和 y 偏移绘制字母的位置，在本例中为 canvas 的中心。

    mouse.x = e.x - bounds.x - canvas.width/2;
    mouse.y = e.y - bounds.y - canvas.height/2;

因此，当我的鼠标位于字母中间时，它显示为一个字母。现在在我的循环中创建每个字母我可以使用 i 来抵消每次迭代。除以 10 只是我选择的一个数字，以防止字母移动太多。与乘法 i*0.25 相同。这只是基于我认为每个字母从前一个字母移动多远看起来不错。

    ctx.strokeText('W', x - (mouse.x/10*(i*0.25)), y - (mouse.y/10*(i*0.25)));
    ctx.fillText('W', x - (mouse.x/10*(i*0.25)), y - (mouse.y/10*(i*0.25)));

您会看到鼠标离字母中心越远，字母的每次迭代展开得越多。

var canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
let bounds = canvas.getBoundingClientRect();
// create mouse event listener
const mouse = { x: 0, y: 0 };
function mouseEvents(e) {
  bounds = canvas.getBoundingClientRect();
  mouse.x = e.x - bounds.x - canvas.width / 2;
  mouse.y = e.y - bounds.y - canvas.height / 2;
}
canvas.addEventListener("mousemove", mouseEvents);

// draw design at x,y and rotated by angle
function drawRotated(x, y) {
  ctx.textAlign = "center";
  ctx.beginPath();
  ctx.font = "300pt Rig Sans";
  ctx.fillStyle = "black";
  ctx.shadowColor = "rgb(255, 153, 51)";
  ctx.strokeStyle = "rgba(255, 153, 51, 0.2)";
  let j = 1;
  for (let i = 7; i > 1; i--) {
    ctx.lineWidth = j;
    ctx.shadowBlur = j;
    ctx.strokeText(
      "W",
      x - (mouse.x / 10) * (i * 0.25),
      y - (mouse.y / 10) * (i * 0.25)
    );
    ctx.fillText(
      "W",
      x - (mouse.x / 10) * (i * 0.25),
      y - (mouse.y / 10) * (i * 0.25)
    );
    ctx.closePath();
    j++
  }
}

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // draw rotated design
  drawRotated(canvas.width / 2, canvas.height / 2 + 100);
  requestAnimationFrame(update);
}
update();

window.addEventListener("resize", () => {
  bounds = canvas.getBoundingClientRect();
  canvas.width = innerWidth;
  canvas.height = innerHeight;
});
//$('#canvas').attr('height', $(document).height());
//$('#canvas').attr('width', $(document).width());

<canvas id="canvas"></canvas>

可能有更好的方法来执行此操作，但它可以帮助您入门。

HTML Canvas - 文本根据鼠标移动移动并显示后面的图层

HTML Canvas - Text moving and showing layers behind based on mouse movement

html

javascript

canvas