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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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