HTML5 Canvas 缓动模糊滤镜教程

要使用 Konva 缓动一个滤镜，我们可以简单地缓动与滤镜相关的属性。
在本教程中，我们将缓动 blurRadius 属性，用于控制施加于图像的模糊程度。

说明：将鼠标悬停在图像上以使其聚焦。

Konva Tween Blur Filter Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Tween Filter 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();

      var lion = new Konva.Image({
        x: 80,
        y: 30,
        draggable: true,
      });
      layer.add(lion);
      stage.add(layer);

      var image = new Image();
      image.onload = function () {
        lion.image(image);
        lion.cache();
        lion.filters([Konva.Filters.Blur]);
        lion.blurRadius(10);

        // the tween has to be created after the node has been added to the layer
        var tween = new Konva.Tween({
          node: lion,
          duration: 0.6,
          blurRadius: 0,
          easing: Konva.Easings.EaseInOut,
        });

        lion.on('mouseover', function () {
          tween.play();
        });

        lion.on('mouseout', function () {
          tween.reverse();
        });
      };
      image.src = '/assets/lion.png';
    </script>
  </body>
</html>