如何在画布上动画 GIF

你不能直接将 GIF 图片插入到画布中。但我们可以使用外部库来解析 GIF，然后将其作为 Konva.Image 形状绘制到图层上。

在这个示例中，我将使用 gifler 来解析和绘制 GIF。你可以使用任何其他库。

Konva GIF demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva GIF Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var canvas = document.createElement('canvas');
      // use external library to parse and draw gif animation
      function onDrawFrame(ctx, frame) {
        // update canvas size
        canvas.width = frame.width;
        canvas.height = frame.height;
        // update canvas that we are using for Konva.Image
        ctx.drawImage(frame.buffer, 0, 0);
        // redraw the layer
        layer.draw();
      }

      gifler('/assets/yoda.gif').frames(canvas, onDrawFrame);

      // draw resulted canvas into the stage as Konva.Image
      var image = new Konva.Image({
        image: canvas,
      });
      layer.add(image);
    </script>
  </body>
</html>