我想在我的画布标签中为弧形创建一个外部发光效果。这是它应该是什么样子的:
到目前为止,我的圆圈是白色的。我尝试使用偏移量为'0‘的dropShadow,但看起来不太对劲。
你有什么建议?也许下面的形状有一个从蓝色到黑色的渐变?提前感谢!
编辑:终于让它工作了。使用for循环绘制具有不同半径和alpha的圆。
发布于 2011-02-21 22:57:22
这些圆圈是图像文件吗?如果是这样的话,在photoshop,GIMP等中创建应用光晕的图像文件。将它们保存为.PNG以保持背景的透明度。
如果它们是使用画布绘制功能在屏幕上绘制的,那么重新绘制圆圈25次,每个圆圈的宽度增加一个像素如何?
发布于 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循环”更快。
我希望这能有所帮助!
发布于 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几何图形,你将能够在没有图像文件的情况下创建这种效果。
https://stackoverflow.com/questions/5067368
复制相似问题