Html HTML5 画布创建形状的外发光效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5067368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas create outer glow effect of shape
提问by tzippy
I want to create an outer glow effect for arc shapes in my canvas tag.
This is what it's supposed to look like:
我想在我的画布标签中为弧形创建一个外发光效果。这应该是这样的：
So far I have the circles in white. I tried using a dropShadow that has an Offset of '0', but this doesn't look right.
到目前为止，我的圆圈是白色的。我尝试使用偏移量为“0”的 dropShadow，但这看起来不对。
What do you suggest? Maybe shapes underneath that have a gradient from blue to black? Thanks in advance!
你有什么建议？也许下面的形状具有从蓝色到黑色的渐变？提前致谢！
Edit: Finally got it working. Used a for loop to draw circles with different radius and alpha.
编辑：终于让它工作了。使用 for 循环绘制具有不同半径和 alpha 的圆。
采纳答案by TimFoolery
Are the circles image files? If so, create image files with glow applied to them within photoshop, GIMP, etc. Save them as .PNG to preserve the transparency of the background.
圆圈是图像文件吗？如果是这样，请在 photoshop、GIMP 等中创建应用了光晕的图像文件。将它们另存为 .PNG 以保留背景的透明度。
If they are drawn on the screen with canvas drawing functions, then how about redrawing the circle 25 times, each circle getting one pixel thicker in width?
如果用画布绘制功能在屏幕上绘制，那么将圆重画 25 次，每个圆的宽度增加一个像素如何？
回答by Renan Santos
You can create outer glow using shadow like this:
您可以使用阴影创建外部发光，如下所示：
context.shadowBlur = 10;
context.shadowColor = "black";
Take a look at this link for an example: http://www.williammalone.com/articles/html5-canvas-example/
看看这个链接的例子：http: //www.williammalone.com/articles/html5-canvas-example/
And here's a really basic JSFiddle.
I think this will be faster than "a for loop to draw circles with different radius and alpha."
我认为这将比“使用 for 循环绘制具有不同半径和 alpha 的圆”更快。
I hope this can help!
我希望这能有所帮助！
回答by pseudopeach
A shadow with 0 offset, a big blur radius and a "light" shadow color basically looks like a glow. I needed to put a green "glow" on an arbitrary filled path, and my code looked like this:
具有 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>
If you just replace my line-y geometry with your circle arcs, you'll be able to create that effect without image files.
如果你只是用你的圆弧替换我的 line-y 几何图形，你将能够在没有图像文件的情况下创建这种效果。
回答by áron
The loop is the solution, indeed, but without playing the radius and the alpha. Simple set the linewidth thick and the shadow with zero offsets and decent blur, then draw the arcs in a loop of... some... like with 10 it will shine.
循环确实是解决方案，但没有播放半径和 alpha。简单地设置线宽粗和阴影为零偏移和适当的模糊，然后在循环中绘制弧线......一些......就像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();
}
回答by PhilT
I was curious to figure out the best solution to this problem as I'm trying to do something similar and it's still the top answer on Google. It turns out that, for canvas on a black background, unless you want a white glow you're better off drawing it manually rather than using shadowBluras the result is too dark.
我很想找出这个问题的最佳解决方案，因为我正在尝试做类似的事情，它仍然是 Google 上的最佳答案。事实证明，对于黑色背景上的画布，除非您想要白色发光，否则最好手动绘制而不是使用，shadowBlur因为结果太暗。
So here is the code, result and JSFIddlefor the solution I came up with which I imagine is something similar to the accepted answer. It works by using the same alpha value but changing the thickness of the line which has an additive effect. Note the use of lineCapwhich will also add glow to the ends of the lines.
所以这是我想出的解决方案的代码、结果和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)
