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

如何使用Canvas绘制闪电动画相关推荐

html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html 闪电的动态效果图,利用HTML5实现Canvas空中闪电动画特效
特效描述:利用HTML5实现 Canvas 空中闪电动画特效.利用HTML5实现Canvas空中闪电动画特效代码结构 1. 引入JS 2. HTML代码 /*=================== ...
前端画圆弧html弧线的像素,使用canvas绘制圆弧动画
效果预览 canvas 绘制基本流程初始画布对于canvas的绘制,首先需要在html内指定一块画布,即, 可以看做是在PS中新建一个空白文档,之后所有的操作都将呈现在这个文档之上,与PS的区别是 ...
canvas绘制简单动画思路总结
使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来.这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次屏幕刷新率保持在60次/秒保障动画效 ...
微信小程序利用canvas绘制一个动画百分比圆圈
效果图(动态的圆圈) <template> <view class='circleBar'><view class="wrap"><vie ...
logo像闪电的html编译器,基于Html5 Canvas绘制逼真的闪电动画特效
Canvas绘制闪电动画特效 canvas, body{ padding: 0; margin: 0; overflow: hidden; } var width, height var step = ...
canvas动画科技园_使用 canvas 实现精灵动画
在最近项目中需要实现一个精灵动画,素材方只提供了一个短视频素材,所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求.在这篇文章中,主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 s ...
【FFH】Canvas实现帧动画及封装（OpenHarmony JS UI）
目录C Demo展示实现思路代码封装 canvas绘制图像动画播放代码调用 Demo展示这里以Tom猫(多年前热门的移动端互动小游戏)为例: 实现思路首先要了解帧动画播放的原理--正如我们 ...
微信小程序canvas绘制环形图（含动画）
页面版效果图思路 1.使用一个canvas绘制(带动画): 2.通过画弧线,设置线宽,来实现圆环效果: 3.计算每段圆弧的起始角度和终止角度,用递归做动画: 绘制完第一段圆弧块–>再绘制下一 ...

如何使用Canvas绘制闪电动画

如何使用Canvas绘制闪电动画相关推荐

最新文章

热门文章