Sprite Js绘制激光图

使用 SpriteJS 绘制激光图可以更加方便和高效，因为 SpriteJS 封装了 Canvas API，提供了更加丰富的绘图功能和更高的性能。

首先，需要创建一个场景和一个图层：

const scene = new spritejs.Scene('#canvas', {width: 800, height: 600});
const layer = scene.layer();

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

const line = new spritejs.Line({
  pos: [startX, startY],
  endPos: [endX, endY],
  strokeColor: 'red',
  lineWidth: 2,
});
layer.appendChild(line);

其中，`pos` 和 `endPos` 分别是起点和终点的坐标，`strokeColor` 是线条的颜色，`lineWidth` 是线条的宽度。

接下来，我们可以使用 `timeline` 来不断地移动激光的起点和终点：

const timeline = new spritejs.Timeline();
timeline.on('run', () => {
  line.attr({
    pos: [startX, startY],
    endPos: [endX, endY],
  });
  
  startX += deltaX;
  startY += deltaY;
  endX += deltaX;
  endY += deltaY;
  
  if (startX > layer.width || startY > layer.height) {
    timeline.stop();
  }
});
timeline.start();

其中，`attr` 方法用来修改 `Line` 对象的属性，从而实现动画效果。`startX`、`startY`、`endX` 和 `endY` 分别是起点和终点的坐标，`deltaX` 和 `deltaY` 是激光每次移动的距离。`timeline` 对象会按照设定的时间间隔不断执行回调函数，从而实现连续的动画效果。

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