logo标签列表

HTML5画布创建形状的外发光效果

htmlcanvas
31

我想在canvas标签中创建外发光效果，适用于弧形的图形。 应该是这样的： enter image description here

到目前为止，我的圆是白色的。我尝试使用偏移量为“0”的dropShadow，但看起来不对。

你有什么建议吗？也许在下面放置从蓝色到黑色渐变的形状？ 先提前感谢您！

编辑：最后搞定了。使用for循环绘制具有不同半径和透明度的圆。 enter image description here

6
JSFiddle之前和之后是什么？ - Ilan Biala
5个回答
79
1
是的，在这里使用影子 API 是最好的选择。它会表现得更好。 - Eric Rowell
JSFiddle/CodePen 的例子？ - Ilan Biala
在Firefox中速度较慢，但除此之外是一个比已被接受的答案更好的回答。 - quemeful
有人真的尝试过这个吗？在黑色背景下，这是行不通的。 - PhilT
11

带有0偏移量、大模糊半径和“光”阴影颜色的阴影基本上看起来像发光。我需要在任意填充路径上放置一个绿色的“发光”，我的代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(20, 80);
      context.lineTo(80, 20);
      context.lineTo(550, 20);
      context.lineTo(550, 130);
      context.lineTo(490, 190);
      context.lineTo(20, 190);
      context.lineTo(20, 80);

      //context.rect(188, 40, 200, 100);
      context.fillStyle = 'red';
      context.strokeStyle = '#00ff00';
      context.lineWidth = 10;
      context.shadowColor = '#00ff00';
      context.shadowBlur = 40;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.stroke();
      context.fill();
    </script>
  </body>
</html>

html5画布上带光晕的路径

如果你用圆弧替换我的线性几何图形，你就能够创建出那种效果，而不需要使用图像文件。

您还可以通过使用rgba颜色来为“glow”添加透明度。这将使“glow”更加微妙。 - Niek Nijland
9

这些圆形是图像文件吗？如果是的话，可以在Photoshop、GIMP等软件中创建带有发光效果的图像文件。将它们保存为 .PNG 格式以保留背景的透明度。

如果这些圆形是使用画布绘制函数在屏幕上绘制的，那么考虑重新绘制圆形25次，每个圆形的宽度增加一个像素。

那些是画布形状。好的，也许重新绘制它们并减少透明度是个好主意！ - tzippy
7
有没有其他更简单的方法来制造发光效果？ - tzippy
使用 .PNG 格式非常容易。如果这不是可接受的选项，那可能会比较困难。我刚刚查找了更多信息，并找到了 这个。将阴影设置为所需的发光颜色应该很容易，将 x/y 偏移量设置为 0，将阴影模糊度设置为大约 8px，然后绘制“阴影”。将颜色设置为明亮的颜色，这个“阴影”基本上就是一个发光效果。 - TimFoolery
PS：我在您的原始帖子中看到您已经尝试了“dropShadow”，但我假设这是-moz-box-shadow类型的阴影...一种CSS阴影。如果您还没有尝试过画布阴影，请告诉我它的效果如何！我对学习新事物很感兴趣！ - TimFoolery
4

我很好奇如何解决这个问题，因为我正在尝试类似的东西，而它仍然是Google上最受欢迎的答案。结果证明，在黑色背景下的画布上，除非你想要白色的发光效果，否则最好手动绘制，而不是使用shadowBlur，因为结果太暗了。

所以这里是代码、结果和JSFIddle，这是我想到的解决方案，我想它与被接受的答案相似。它通过使用相同的 alpha 值但改变线条的厚度来实现，具有累加效应。请注意使用lineCap，它也会在线条的末端添加发光效果。

const canvas = document.getElementById('canvas') 
const c = canvas.getContext('2d')
    canvas.width = 240
    canvas.height = 340
const gradient = c.createLinearGradient(0, 0, 150, 300);
    gradient.addColorStop(0, '#444')
    gradient.addColorStop(1,'#000')
    c.fillStyle = gradient
c.fillRect(0, 0, canvas.width, canvas.height)

const drawC = function (radius, maxWidth, minWidth) {
  const inc = (maxWidth - minWidth) / 5
  for (let width = maxWidth; width >= minWidth; width -= inc) {
    c.lineWidth = width
    if (width > 10) { 
      c.strokeStyle = 'rgba(50, 50, 255, 0.2)'
    } else {
      c.strokeStyle = 'white' 
    }
    c.lineCap = 'square'
    c.beginPath()
    c.arc(0, 0, radius, 2 * Math.PI * 0.04, 2 * Math.PI * 0.96)
    c.stroke()
  }
}

c.translate(120, 170)
drawC(70, 30, 10)
c.rotate(2 * Math.PI * 0.75)
drawC(100, 20, 4)

enter image description here

4
循环确实是解决方案，但没有涉及半径和角度。只需将线宽设置为较粗，阴影偏移量为零且模糊度适中，然后在循环中绘制弧形...例如，使用10个会使其发光。
ctx.fillStyle='black';
ctx.fillRect(0,0,500,500);
ctx.lineWidth=25;
ctx.strokeStyle='white';
ctx.shadowColor='blue';
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=0;
ctx.shadowBlur=25;
for(a=0;a<10;a++) {
    ctx.beginPath();
    ctx.arc(250,250,200,Math.PI/12,23*Math.PI/12);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(250,250,100,7*Math.PI/12,5*Math.PI/12);
    ctx.stroke();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接