javascript - 如何在 html Canvas 中添加镜头光晕效果

Question

此代码显示一个圆圈:我想在其上添加镜头光晕(如 PhotoShop 中的光晕效果)。怎么做？

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'pink';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#f0505f';
context.stroke();

body {
  margin: 0px;
  padding: 0px;
}

<canvas id="myCanvas" width="578" height="200"></canvas>

Answer 1

镜头光晕效果在图像顶部叠加许多较小的效果以创建镜头光晕。

以下教程介绍了镜头光晕效果所需的效果:

http://library.creativecow.net/articles/mylenium/lens_flare.php

这是创建每种效果所需的 html5 canvas 技术。

我一直想做一个镜头光晕效果，但一直没有时间实现。

所以尝试一下...如果您有困难，请提出问题，我很乐意提供帮助。

祝您的项目顺利!

这些是径向渐变填充(有或没有模糊)

所需的 Html5 Canvas 技术:

• 创建径向渐变
• 阴影模糊

这些是带有径向渐变填充和模糊的星星(粗的和细的)

所需的 Html5 Canvas 技术:

• 用正多边形创建的星形路径
• 创建径向渐变
• 阴影模糊

这是一种径向渐变填充，带有已使用 Y 缩放“展平”的模糊效果

所需的 Html5 Canvas 技术:

• 创建径向渐变
• 阴影模糊
• 缩放变换(缩放 Y 会将圆“压平”成条子)

这是一条弧

所需的 Html5 Canvas 技术:

• 圆弧路径命令

这是一 strip 有渐变的弧线，随笔划运行

所需的 Html5 Canvas 技术:

• 圆弧路径命令
• 图像切片(示例:Gradient Stroke Along Curve in Canvas)

这是一系列沿着圆绘制的矩形

所需的 Html5 Canvas 技术:

• 填充矩形
• 三 Angular 学(计算沿圆的 x/y 点)
• 三 Angular 学(延长圆的半径)