javascript画布-跟随鼠标位置线条

<canvas id="myCanvas" width="800" height="600"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 初始化线条的起点坐标
var startX = canvas.width / 2;
var startY = canvas.height / 2;

// 监听鼠标移动事件
canvas.addEventListener("mousemove", function(event) {
  // 获取鼠标位置
  var mouseX = event.clientX - canvas.offsetLeft;
  var mouseY = event.clientY - canvas.offsetTop;

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制线条
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(mouseX, mouseY);
  ctx.stroke();
});