Js 绘制激光图

要绘制激光图，可以使用 HTML5 的 Canvas API 和 JavaScript 来实现。

首先，需要创建一个 Canvas 元素，并获取其上下文对象：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

然后，可以使用 `moveTo` 和 `lineTo` 方法来绘制一条直线：

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();

其中，`startX` 和 `startY` 是起点的坐标，`endX` 和 `endY` 是终点的坐标。需要注意的是，`stroke()` 方法是用来绘制轮廓线条的。

接下来，我们可以使用 `setInterval` 方法来不断地绘制激光：

const intervalId = setInterval(() => {
  // 绘制激光
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
  
  // 移动激光的起点和终点
  startX += deltaX;
  startY += deltaY;
  endX += deltaX;
  endY += deltaY;
  
  // 判断激光是否超出 Canvas 区域
  if (startX > canvas.width || startY > canvas.height) {
    clearInterval(intervalId);
  }
}, 10);

其中，`deltaX` 和 `deltaY` 是激光每次移动的距离。`setInterval` 方法会每隔一段时间执行一次回调函数，从而实现连续的绘制效果。

以上就是使用 JavaScript 和 Canvas 绘制激光图的方法。如果需要更加复杂的效果，可以参考 Canvas API 的其他方法和属性。