大学时候，有一段时间对flash比较感兴趣。去图书馆借了一本很厚很厚的falsh书籍。

翻了几页之后，就再没有往后看过。印象比较深的是作者说他用flash完成了一个龙卷风效果。

一直到现在我也没有看到那个效果。

我也曾经想过实现一下。但是大学时候的技术水平，也支撑不起这个想法。慢慢就忘记了。

偶尔间我看到了离心运动。突然就想到一个写法。

演示地址如下：

http://suohb.com/work/wind2.htm

点击查看效果

最终效果图如下：

龙卷风，我们可以看做一个向上旋转的气流。

风本身是不可见的，我们就用某个质点的移动轨迹画出来，表示风。

从上向下俯视，就是这样，一个质点做离心运动的路径。

从侧面看，是这样在，一个质点绕Y轴左右摇摆，摆动越来越大的的运动的路径。

我们就用这个来做为侧视图的效果，来做一个2D的龙卷风。

那么开始代码设计：

我们定义一个点，这个点Y轴上恒定速率运动，X轴上，向这中线方向有一个向心力G。一旦点运动超过这条中线，向心力倒转为-G。

这样就会画出上面侧视图的效果。

然后每个周期都新增一些这样的点，画出轨迹。如图；

基本上这样就已经完成了，我们不需要画出完整的路径，只要画出最新的一段就可以。

当到达一定高度之后，就将这条线慢慢移除出去。就得到最终效果

代码如下：

 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Pragma" content="no-cache" />

 <meta http-equiv="Cache-Control" content="no-cache" />

 <meta http-equiv="Expires" content="0" />

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

 <style type="text/css">

 html{

     height: 100%;

 }

 html,body,ul,li,canvas{

     margin: 0;

     padding: 0;

 }

 </style>

 </head>

 <body bgcolor="#000000">

 <canvas id="knife"></canvas>

 </body>

 <script>

 var canvas = document.getElementById("knife");

 canvas.style.position = "absolute" ;

 canvas.style.top = 0 ;

 var w = window.innerWidth ;

 var h = window.innerHeight ;

 canvas.width = w ;

 canvas.height = h ;

 var cxt = canvas.getContext("2d");

 cxt.strokeStyle = "#FFF" ;

 var list = [];

 var G = 0.4 ;//向心加速度

 var SPEED_Y = -1 ;//向上速度

 var centerLine = w/2 ;//龙卷风中线

 function addLine(){

     var LEN = 2 ;

     for(var i = 0 ;i < LEN ; i ++){

         list.push({

             x:w/2,

             y:h/1.3,

             g:G,

             c:centerLine+2*Math.random(),

             sx:(Math.random()-0.5)*4,

             sy:SPEED_Y+0.5*(Math.random()-0.5),

             len:Math.round(Math.random()*10+5),

             list:[{x:w/2,y:h/1.3}]

         });

     }

 }

 function step(){

     cxt.clearRect(0,0,w,h);

     addLine();

     var obj ;

     for(var i = 0 ; i < list.length; i ++){

         obj = list[i] ;

         if(obj.y < h/2.5){//如果超过这个高度，就删除一个点

             obj.len -- ;

             if(obj.len == 0){

                 list.splice(i,1);

                 i -- ;

                 continue ;

             }

         }

         obj.x += obj.sx ;

         obj.y += obj.sy ;

         obj.sx += obj.g ;

         obj.g = obj.x > obj.c ? -G : G ;

         obj.list.unshift({x:obj.x,y:obj.y});//记录下质点运动轨迹

         obj.list = obj.list.slice(0,obj.len);//仅仅画出其中一段线就好

         //画出所有点的连线

         cxt.beginPath();

         cxt.moveTo(obj.list[0].x,obj.list[0].y);

         for(var j = 1 ; j < obj.list.length; j ++){

             cxt.lineTo(obj.list[j].x,obj.list[j].y);

         }

         cxt.stroke();

     }

     requestAnimationFrame(step);

 }

 requestAnimationFrame(step);

 </script>

 </html>

更多特效请关注公众号：

CANVAS模仿龙卷风特效的更多相关文章

  1. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  2. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  3. canvas之背景特效

    需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...

  4. 结合canvas做雨滴特效

    雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  6. [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  7. canvas模仿微信抢红包功能

    1.原理:先创建一张img图片,用filter滤镜制作毛玻璃效果. 2.利用绝对定位,使canvas刚好盖在img上面. 3.利用canvas原生clip函数剪辑一个圆形. 地址:http://san ...

  8. canvas连线特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas简单下雨特效

    前面做了两个简单的效果,这次就来个下雨的效果 思路简单的说一下 随机在屏幕中的位置画雨滴,moveTo(x,y) 雨滴的长度就是lineTo(x,y+len) 每次重新绘制页面,就能达到下雨的效果了 ...

随机推荐

  1. 关于springmvc接受简单参数和List集合数据的实现

    首先要创建一个搭建一个springmvc的工程,至于如何搭建这里就不说了.给出比较重要的配置,项目目录结构如下,弄的比较简单,因为最近遇到一个需要传递List集合数据的问题,所以就当做实验. web. ...

  2. C# 实现模拟登录功能，实现公共类分享。

    前言 最近在研究模拟登录的各种方法, 主要想要实现的两个功能是: 1.点击按钮可以直接跳转并登录到某一个系统中. 2.抓取某一个系统中某一个页面中的特定数据. 为此在网上查了许多的资料,首先了解到自身 ...

  3. .NET Core多平台开发体验[1]: Windows

    微软在千禧年推出 .NET战略,并在两年后推出第一个版本的.NET Framework和IDE(Visual Studio.NET 2002,后来改名为Visual Studio),如果你是一个资深的 ...

  4. 第一行代码_activity生命周期

    这类文章基本上已经是烂大街了,不过我今天仍然要给自己做一遍梳理,因为通过昨天的项目我发现自己还是不太懂activity的各个生命周期;各位看官勿喷; 七个生命周期及其作用 oncreat 完成初始化操 ...

  5. H5性能测试学习

    工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍.本文要提到的工具有两类: 一类是抓包工具,如Fiddler.Charles等.这类工具不仅可以抓包,还可以对 ...

  6. LVS之DR跨网段实战及高可用性

    author:JevonWei 版权声明:原创作品 LVS-DR实现跨网段 网络拓扑 网络环境 RS1 RIP 192.168.198.138/24 VIP 192.168.80.100/32 GW ...

  7. Microsoft .Net Remoting系列专题之一:.Net Remoting基础篇

    Microsoft .Net Remoting系列专题之一 一.Remoting基础 什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式.从微软的产品角度来看,可以说Remotin ...

  8. JAVA定时任务实现的几种方式

    近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整理了一下定时任务的几种实现方式,由于项目采用spring框架,所以我都将结合spring框架来介绍. 一 ...

  9. fixed定位兼容性

    不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看 ...

  10. 【C#多线程编程实战笔记】一、 线程基础

    创建线程 Thread :所执行的方法不能有参数. class Program { static void Main(string[] args) { Console.WriteLine(" ...