如何在html画布中添加镜头光晕效果

Question

此代码显示一个圆圈：我想在此添加镜头光晕（如PhotoShop中的光晕效果）。怎么做？

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

镜头眩光效果会在图像顶部覆盖许多较小的效果，从而产生镜头眩光。

这是一个教程，说明镜头眩光效果所需的效果：

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

这是创建每个效果所需的html5画布技术。

我一直想做一个镜头眩光效果，但没有时间去完成它。

所以试一试......如果你遇到困难只是发一个问题，我很乐意提供帮助。

祝你的项目好运！

这些是径向渐变填充（带有＆amp;无模糊）

需要Html5画布技术：

• createRadialGradient
• shadowBlur

这些是具有径向渐变填充的星形（厚而薄）。模糊

需要Html5画布技术：

• 使用常规多边形创建的星形路径
• createRadialGradient
• shadowBlur

这是一个径向渐变填充，其模糊已使用Y缩放“展平”

需要Html5画布技术：

• createRadialGradient
• shadowBlur
• 比例变换（缩放Y会将圆圈“展平”成条子）

这是一个弧

需要Html5画布技术：

• arc path命令

这是一个带有描边的渐变的弧

需要Html5画布技术：

• arc path命令
• 图片切片（例如：Gradient Stroke Along Curve in Canvas）

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

需要Html5画布技术：

• fillRect
• 三角学（沿圆圈计算x / y点）
• 三角学（扩展圆的半径）