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

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画布技术.

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

那么试一试......如果你遇到困难只是发一个问题,我很乐意提供帮助.

祝你的项目好运!

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

需要Html5画布技术:

• createRadialGradient
• shadowBlur

这些是恒星(厚和薄),具有径向渐变填充和模糊

需要Html5画布技术:

• 用正多边形创建的星形路径
• createRadialGradient
• shadowBlur

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

需要Html5画布技术:

• createRadialGradient
• shadowBlur
• 缩放变换(缩放Y将圆圈"展平"成条子)

这是一个弧形

需要Html5画布技术:

• 弧路径命令

这是一个带有笔划的渐变弧

需要Html5画布技术:

• 弧路径命令
• 图像切片(例如:画布中沿曲线的渐变描边)

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

需要Html5画布技术:

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