js实现炫酷光感效果

实现炫酷光感效果的攻略：

1. 利用CSS3的linear-gradient实现光感渐变效果

CSS3的linear-gradient是产生线性渐变效果的方法，我们可以利用它来制作光感渐变效果。具体实现方法如下：

.light{
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 25%);
}

.box{
  background: #0a0;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
}

.box:before{
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: inherit;
  transform: rotate(45deg);
  z-index: 2;
}

上述代码中，我们首先给需要添加光感效果的元素添加一个background属性，将它设置为线性渐变，产生渐变色的区域将与元素宽度平行分布。

其次，在元素的before伪元素中，定义继承父元素的background属性、绝对定位、各方向距离父元素边缘为50%的距离、旋转45度以及z-index。

1. 在canvas绘图中实现光感效果

canvas绘图也能够实现光感效果。在canvas中，我们可以利用绘制圆形的API实现图形并赋予光感效果。具体步骤如下：

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

ctx.fillStyle = "#ddd";
ctx.fillRect(0, 0, 300, 300);

let radialGradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100);
radialGradient.addColorStop(0, "#fff");
radialGradient.addColorStop(1, "#ddd");
ctx.fillStyle = radialGradient;
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.fill();

上述代码中，我们首先定义了一个canvas绘图的上下文2d。接着，我们定义了一个矩形区域，并将其填充成灰色背景。我们通过createRadialGradient方法创建了一个径向渐变的对象，并指定了圆心、内径、外径以及颜色等参数。接下来，我们将fillStyle属性设置为径向渐变对象，并通过arc方法绘制一个圆形。最后，我们调用fill方法进行填充。

通过这样方式，我们可以在canvas绘图中实现圆形光感渐变的效果。