关闭。这个问题需要详细或明确。它目前不接受答案。
**想改进这个问题吗？**编辑这篇文章，添加细节并澄清问题。

五天前关门。
改进这个问题
我增强了这支钢笔>https://codepen.io/osublake/pen/bqeamv 因此，它适用于多个画布元素/精灵。

var vw, vh, cx, cy;

      var train = {
        rotation: 0,
        frame: 0,
        x: -1920 / 2,
        y: -1090 / 2
      };

      function getTL($ELEMENT) {

        var canvas = document.createElement('canvas');
        var context = canvas.getContext("2d");
        $ELEMENT.append(canvas);

        var name = $ELEMENT.data('name');
        resize(canvas,context);

        var sprite = new Image();
        sprite.src = theme_url + "/build/images/sprites/" + name + ".jpg";
        sprite.onload = function() {

          tl = new gsap.timeline({ onUpdate: update,onUpdateParams:[context,sprite], paused : true });
          tl.to(train, { duration:3, frame: frames.length - 1, roundProps: "frame", repeat: 0 }, 0)

          return tl;

        };

      }

      function makeTL() {
        $( ".js_canvas" ).each(function( index ) {
          masterTL.add(getTL($(this),$(this));
        });
      }
      resize();
      makeTL();

      function update(context,sprite) {

        var frame = frames[train.frame];

        var f = frame.frame;
        var s = frame.spriteSourceSize;

        var x = train.x + s.x;
        var y = train.y + s.y;

        context.save();
        context.clearRect(0, 0, vw, vh);
        context.translate(cx, cy);
        context.rotate(train.rotation);
        context.drawImage(sprite, f.x, f.y, f.w, f.h, x, y, f.w, f.h);
        context.restore();
      }

      function resize(canvas,context) {

        vw = 1920;
        vh = 1080;

        cx = vw / 2;
        cy = vh / 2;

        canvas.width  = vw * resolution;
        canvas.height = vh * resolution;

        canvas.style.width  = vw + "px";
        canvas.style.height = vh + "px";

        context.scale(resolution, resolution);
        context.scale(resolution, resolution);
      }

我主要关心的是，是否可以将参数添加到 getTL 这样我就知道我需要加载什么精灵了？
如果你认为这个js可以在其他方面更有效地工作，请让我知道。谢谢