SVG处理html图像标记 - 而不是在HTML5画布上

Question

我这里有问题。我只需点击一下按钮即可实现。我在网上搜索并发现 SVG 是一种更简单的方法，而不是 CSS样式表。

我有一个 HTML5画布（它基本上是我使用drawImage（）绘制到HTML 5画布上的视频流的快照）。单击一个按钮，我希望具有以下效果的图像出现在画布而不是原始图像上。

我的问题是，如果我只对图像应用效果，我就可以复制效果。但是，在画布上它分别为我提供了面具和图像。这是我用于SVG的代码

<svg height="0">
    <defs>
      <mask id="mask-radial">
        <rect width="500" height="500" fill="url(#g1)"></rect>
        <radialGradient id="g1" cx="80%" cy="80%" r="100%">
          <stop stop-color="black" offset="50%"/>
          <stop stop-color="white" offset="110%"/>
        </radialGradient>
      </mask>
      <!--<mask id="mask-linear">
        <rect width="400" height="300" fill="url(#l1)"></rect>
        <linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
          <stop stop-color="white" offset="0%"/>
          <stop stop-color="black" offset="30%"/>
          <stop stop-color="white" offset="100%"/>
        </linearGradient>
      </mask>  -->
      <filter id="filtre1">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
      </filter>
     <!-- <filter id="filtre2">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
      </filter> -->
    </defs>
    </svg>

这就是我在 CSS

中调用它的方式

   .effet{
  width: 500px; height: 500px;
  margin: 0 auto 50px auto;
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
  position: absolute;
}
.filtre--r{
  -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 50%, black 80%);
  -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 80%);
  -webkit-filter: blur(40px);
  mask: url('#mask-radial');
  filter: url('#filtre1');
}

这些是我的HTML元素。

<div class="effet">
  <img src="/static/images/noEffect.png" alt="" />
<img class="filtre filtre--r" src="/static/images/noEffect.png" alt="" />
</div>

有人可以告诉我如何为画布重新创建效果吗？提前谢谢。

Answer 1

我研究并发现HTML5 Canvas径向渐变是一种有效的解决方案。

        var lightSize = 100;
        var x = 200;
        var y = 200;

         var radialGradient = context.createRadialGradient(x, y, 0,x, y, lightSize);
          radialGradient.addColorStop(0, "#FFFF99"); // color at start circle
          radialGradient.addColorStop(0.9, "#FFFF99"); //color at offset 0.9
          radialGradient.addColorStop(1, '#7D7D5C');// color of finish circle  

          context.globalCompositeOperation = "multiply";
          context.fillStyle = radialGradient;

能够完全重现效果。