在天气预报类移动网页应用中,我们常常需要使用到雷雨天气时的闪电动画。
本文介绍如何使用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,1)" ctx.stroke(); ctx.closePath(); if (y > canvHeight) { ctx.clearRect(0,canvWidth,canvHeight); x = canvWidth / 2; y = 0; } requestAnimationFrame(light); }; light();查看在线实例: http://wow.techbrood.com/fiddle/25402