HTML5画布创建形状的外部发光效果
HTML5画布创建形状的外部发光效果
提问于 2011-02-21 22:52:39
我想在我的画布标签中为弧形创建一个外部发光效果。这是它应该是什么样子的：
到目前为止，我的圆圈是白色的。我尝试使用偏移量为'0‘的dropShadow，但看起来不太对劲。
你有什么建议？也许下面的形状有一个从蓝色到黑色的渐变？提前感谢！
编辑:终于让它工作了。使用for循环绘制具有不同半径和alpha的圆。
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-02-21 22:57:22
这些圆圈是图像文件吗？如果是这样的话，在photoshop，GIMP等中创建应用光晕的图像文件。将它们保存为.PNG以保持背景的透明度。
如果它们是使用画布绘制功能在屏幕上绘制的，那么重新绘制圆圈25次，每个圆圈的宽度增加一个像素如何？
Stack Overflow用户
发布于 2012-03-14 08:01:52
可以使用阴影创建外部发光，如下所示：
context.shadowBlur = 10;
context.shadowColor = "black";请查看此链接以获取示例：http://www.williammalone.com/articles/html5-canvas-example/
和here's a really basic JSFiddle。
我认为这将比“一个绘制不同半径和alpha的圆的for循环”更快。
我希望这能有所帮助！
Stack Overflow用户
发布于 2013-05-17 23:02:31
具有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>
如果你只是用你的圆弧替换我的直线-y几何图形，你将能够在没有图像文件的情况下创建这种效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5067368
复制相关文章
相似问题