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;

能够完全重现效果。