如何使用Canvas绘制闪电动画

在天气预报类移动网页应用中，我们常常需要使用到雷雨天气时的闪电动画。

本文介绍如何使用Canvas来很简单的实现这个效果。对于Canvas不熟悉的，可阅读踏得网Canvas基础知识。

本例预期结果如下：

本质上我们只是要在画布上绘制一条曲线而已，只不过这条曲线有固定的起点，相对随机的走向。

注意：这里是相对随机，也就是线条的走向不能毫无规律，一般不可能从左到右大幅度游走，而是有限区间内的游走。

具体代码实现如下：

var x = canvWidth / 2;
var y = 0;
var light = function() {
  var r = 0;
  ctx.beginPath();
  ctx.moveTo(x, y);
  r = Math.floor(Math.random() * 5) * canvWidth / 50;
  if (r <= 30) {
    x += r;
  } else {
    x -= r;
  }
  y += Math.floor(Math.random() * 5) * canvHeight / 70;
  ctx.lineTo(x, y);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "rgba(255, 255, 0, 1)"
  ctx.stroke();
  ctx.closePath();
  if (y > canvHeight) {
    ctx.clearRect(0, 0, canvWidth, canvHeight);
    x = canvWidth / 2;
    y = 0;
  }
  requestAnimationFrame(light);
};


light();

查看在线实例： http://wow.techbrood.com/fiddle/25402

by iefreer