HTML5画布创建外部发光效果的形状
我想在canvas标签中为弧形创建外部发光效果.它应该是这样的:
到目前为止,我的圈子都是白色的.我尝试使用具有偏移量'0'的dropShadow,但这看起来不正确.
你有什么建议？也许下面的形状有从蓝色到黑色的渐变？提前致谢!
编辑:终于搞定了.使用for循环绘制具有不同半径和alpha的圆.
小智 56
您可以使用阴影创建外部光晕,如下所示:
context.shadowBlur = 10;
context.shadowColor = "black";
请查看此链接以获取示例:http: //www.williammalone.com/articles/html5-canvas-example/
我认为这比"用于绘制具有不同半径和alpha的圆圈的for循环"更快.
我希望这可以帮助你!
pse*_*ach 10
具有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线几何体,您将能够在没有图像文件的情况下创建该效果.
圆形图像文件？如果是这样,请在photoshop,GIMP等中创建应用了发光的图像文件.将它们保存为.PNG以保持背景的透明度.
如果使用画布绘制功能在屏幕上绘制它们,那么如何重新绘制圆圈25次,每个圆圈的宽度增加一个像素？
- 没有其他方法可以更容易地创造出光芒吗？ (7认同)
| 归档时间： |
|
| 查看次数： |
39987 次 |
| 最近记录： |