基于Canvas实现文字跟随鼠标在钦慕上放大缩小的代码

好的，下面是基于Canvas实现文字跟随鼠标在钦慕上放大缩小的代码：

// 获取画布和画笔
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 设置文字样式
ctx.font = 'bold 50px Arial';
ctx.fillStyle = 'red';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 定义文字和初始大小
let text = 'Hello World!';
let size = 50;

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(event) {
  // 获取鼠标位置
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 设置字体大小
  ctx.font = `bold ${size}px Arial`;
  
  // 计算文字宽度和高度
  const textWidth = ctx.measureText(text).width;
  const textHeight = size;
  
  // 绘制文字
  ctx.fillText(text, mouseX, mouseY);
  
  // 判断是否需要改变字体大小
  if (size >= 100 || size <= 30) {
    // 反转字体大小变化方向
    sizeDir = -sizeDir;
  }
  
  // 改变字体大小
  size += sizeDir;
});

这段代码中，我们首先获取了画布和画笔，然后设置了文字的样式和初始大小。接着监听了鼠标移动事件，在事件处理函数中清除了画布，然后根据鼠标位置绘制了文字。同时还计算了文字的宽度和高度，用于后续判断是否需要改变字体大小。最后判断是否需要改变字体大小，并修改字体大小和变化方向。