SVG在HTML图像标签上工作 - 不在HTML5画布上

Question

我在这里遇到问题。我需要一些东西来实现onclick按钮。我在网上搜索并发现，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画布径向梯度是一种有效的解决方案。

 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; 

完全能够重现效果。