在天气预报类移动网页应用中,我们常常需要使用到雷雨天气时的闪电动画。
本文介绍如何使用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