如何在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

透镜耀斑效应覆盖在图像顶部的许多较小的效果，以创建透镜耀斑。

​

​

，这里有一个教程，说明你的镜头耀斑效果需要哪些效果：

flare.php

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

我一直想做一个透镜耀斑效果，但还没有时间来完成它。

所以，给它一个go...if，你有困难，只需发布一个问题，我很乐意帮忙。

祝你的项目好运！

这些是径向梯度填充(有和没有模糊)

需要Html5画布技术：

• createRadialGradient
• shadowBlur

​

​

这些星(厚的和薄的)有径向梯度填充&模糊

需要Html5画布技术：

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

​

​

-这是一个径向梯度填充的模糊，已经“扁平”使用Y标度。

需要Html5画布技术：

• createRadialGradient
• shadowBlur
• 尺度变换(标度Y将把圆圈“压平”成条条)

​

​

这是一个弧形

需要Html5画布技术：

• 弧路径命令

​

​

这是一个带有梯度的弧线，它与笔画一起运行

需要Html5画布技术：

• 弧路径命令
• 图像切片(例如：Gradient Stroke Along Curve in Canvas)

​

​

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

需要Html5画布技术：

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

​

​