blocks|key|994521|text|这些圆圈是图像文件吗？如果是这样的话，在photoshop，GIMP等中创建应用光晕的图像文件。将它们保存为.PNG以保持背景的透明度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994522|如果它们是使用画布绘制功能在屏幕上绘制的，那么重新绘制圆圈25次，每个圆圈的宽度增加一个像素如何？|994523|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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. 

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?

blocks|key|780217|text|可以使用阴影创建外部发光，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780218|context.shadowBlur+=+10;
context.shadowColor+=+"black";|code-block|syntax|javascript|780219|请查看此链接以获取示例：http://www.williammalone.com/articles/html5-canvas-example/|offset|length|780220|和here's+a+really+basic+JSFiddle。|780221|我认为这将比“一个绘制不同半径和alpha的圆的for循环”更快。|780222|我希望这能有所帮助！|780223|entityMap|0|LINK|mutability|MUTABLE|url|http://www.williammalone.com/articles/html5-canvas-example/|1|https://jsfiddle.net/kt4xfaef/11/^0|0|0|C|1N|0|0|1|U|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

You can create outer glow using shadow like this:

<pre><code>context.shadowBlur = 10;
context.shadowColor = "black";
</code></pre>

Take a look at this link for an example:
<a href="http://www.williammalone.com/articles/html5-canvas-example/">http://www.williammalone.com/articles/html5-canvas-example/</a>

And <a href="https://jsfiddle.net/kt4xfaef/11/">here's a really basic JSFiddle</a>.

I think this will be faster than "a for loop to draw circles with different radius and alpha."

I hope this can help!

blocks|key|994694|text|具有0偏移量、较大的模糊半径和“光”阴影颜色的阴影基本上看起来像光晕。我需要在任意填充的路径上放置一个绿色的“发光”，我的代码看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994695|<!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>|code-block|syntax|javascript|994696|​|994697|📷|atomic|offset|length|994698|994699|如果你只是用你的圆弧替换我的直线-y几何图形，你将能够在没有图像文件的情况下创建这种效果。|994700|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/9f7f643091d6a0678de08d45e59c203e.png|imageAlt^0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|12|8|@]|9|@$L|13|M|14|1|15]]|A|$]]|$1|N|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

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:

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;style&gt;
 body {
 margin: 0px;
 padding: 0px;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;
 &lt;script&gt;
 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();
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<img src="https://i.stack.imgur.com/M1KAD.png" alt="path with glow on html5 canvas">

If you just replace my line-y geometry with your circle arcs, you'll be able to create that effect without image files.

blocks|key|994790|text|我很好奇找出这个问题的最佳解决方案，因为我正在尝试做一些类似的事情，它仍然是谷歌上最好的答案。事实证明，对于黑色背景上的画布，除非你想要白光，否则你最好手动绘制它，而不是使用shadowBlur，因为结果太暗了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|994791|下面是我想出的解决方案的代码、结果和JSFIddle，我认为它们与公认的答案类似。它的工作原理是使用相同的alpha值，但改变线条的粗细，这具有相加的效果。请注意lineCap的使用，它也会将发光添加到线条的末端。|994792|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)|code-block|syntax|javascript|994793|​|994794|📷|atomic|994795|994796|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/electricvisions/a3z2gkdg/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b66be979685348521c77ee7a078d2d06.png|imageAlt^0|2F|A|0|29|7|I|8|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|R|3|N|5|6|7|1L|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|11|W|12|E|$13|14|15|-4]]]]

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 <code>shadowBlur</code> as the result is too dark.

So here is the code, result and <a href="https://jsfiddle.net/electricvisions/a3z2gkdg/" rel="nofollow noreferrer" title="JSFiddle">JSFIddle</a> for 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 <code>lineCap</code> which will also add glow to the ends of the lines. 

<pre><code>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 &gt;= minWidth; width -= inc) {
 c.lineWidth = width
 if (width &gt; 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)
</code></pre>

<a href="https://i.stack.imgur.com/KQZox.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KQZox.png" alt="enter image description here"></a>

blocks|key|994890|text|实际上，循环就是解决方案，但没有播放半径和alpha。简单地设置线宽厚和阴影与零偏移和适当的模糊，然后绘制一个循环中的圆弧…有些人。就像有了10个，它就会闪闪发光。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994891|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%2B%2B)+{
++++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();
}|code-block|syntax|javascript|994892|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>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&lt;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();
}
</code></pre>

I want to create an outer glow effect for arc shapes in my canvas tag.
This is what it's supposed to look like:
<img src="https://i.stack.imgur.com/worKA.jpg" alt="enter image description here">

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.

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.
<img src="https://i.stack.imgur.com/0MnEB.jpg" alt="enter image description here">

HTML5 canvas create outer glow effect of shape

我想在我的画布标签中为弧形创建一个外部发光效果。这是它应该是什么样子的：​到目前为止，我的圆圈是白色的。我尝试使用偏移量为'0‘的dropShadow，但看起来不太对劲。你有什么建议？也许下面的形状有一个从蓝色到黑色的渐变？提前感谢！编辑:终于让它工作了。使用for循环绘制具有不同半径和alpha的圆。​

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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