如何在HTLM5中绘制跟随光标/手指的动态线

<canvas id="myCanvas" width="500" height="500"></canvas>

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

canvas.addEventListener('mousemove', drawLine);
canvas.addEventListener('touchmove', drawLine);

function drawLine(e) {
  e.preventDefault(); // 防止触摸事件的默认行为
  var x = e.clientX || e.touches[0].clientX; // 获取x坐标
  var y = e.clientY || e.touches[0].clientY; // 获取y坐标

  // 绘制线条
  ctx.lineTo(x, y);
  ctx.stroke();
}

function init() {
  ctx.beginPath();
  ctx.moveTo(0, 0); // 设置起始点
}

init();