如何使用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