夏天的闪电

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

到了夏天，天气变化的很快，可能白天还阳光明媚，到了可能就电闪雷鸣了，我们今天就来用canvas模拟一个闪电的效果， 用canvas做一个闪电效果

var ctx = canv.getContext("2d");

主要思路是 获取canvas画布的总宽度 和高度

var width = cavans.width;
var height = cavans.height;

分别设置x，y

x是横坐标 y是纵坐标

x主要是控制闪电的起点位置及每一次画直线的起点 最开始的起点一般都是画布的一般

 x = width / 2;
 y = 0

y就是高度最大高度就是canvas画布高度

每一次画直线我们只画一小段，每次画的起点都是上一次画的终点 同时我们还要控制 每次起点的(x y)和终点的(x y),x坐标的差值，不大于你设置的值，(我们要模拟闪电的那种曲折的样式，实现起点和终点的x坐标要不一致，如果一直的话 就是直线了)

现实方式

r = Math.floor(Math.random() * 4) * canvWidth / 50; // 去一个0-4的随即数 这个数可以自己自定义 r其实就是你终点x
为了让你的闪电不要太夸张 你需要在做一个判读
if (r <= 40) {
       x += r;
} else {
      x -= r;
}
上面的代码 主要是在随机的所有画线，让闪电更加有曲折感

y是每次画线的 纵坐标 其实也是需要一个随机数，如果是一个固定数值感觉会很怪异

  y += Math.floor(Math.random() * 5) * height / 100; // 100这个数值也是自己自定义即可

画完一小段之后需要 下面那段代码来结束

ctx.stroke();
ctx.closePath();

需要用requestAnimationFrame(是浏览器对网页的绘制，有系统决定回调的时机，不会丢帧性能更好)定时器的方式重复去操作这段代码，直到画的高度超过了canvas的高度， 这个时候我们的需要判断y的累积值是不是大于了画布的高度，如果是我们需要清空之前画的，并且重置 x y

 ctx.clearRect(0, 0, width, height);
x = width / 2;
 y = 0;

下面是我的代码块