CANVAS模仿龍捲風特效

2021-09-29 12:21:52 字數 3551 閱讀 6536

大學時候,有一段時間對flash比較感興趣。去圖書館借了一本很厚很厚的falsh書籍。

翻了幾頁之後,就再沒有往後看過。印象比較深的是作者說他用flash完成了乙個龍捲風效果。

一直到現在我也沒有看到那個效果。

我也曾經想過實現一下。但是大學時候的技術水平,也支撐不起這個想法。慢慢就忘記了。

偶爾間我看到了離心運動。突然就想到乙個寫法。

演示位址如下:

最終效果圖如下:

龍捲風,我們可以看做乙個向上旋轉的氣流。

風本身是不可見的,我們就用某個質點的移動軌跡畫出來,表示風。

從上向下俯視,就是這樣,乙個質點做離心運動的路徑。

從側面看,是這樣在,乙個質點繞y軸左右搖擺,擺動越來越大的的運動的路徑。

我們就用這個來做為側檢視的效果,來做乙個2d的龍捲風。

那麼開始**設計:

我們定義乙個點,這個點y軸上恆定速率運動,x軸上,向這中線方向有乙個向心力g。一旦點運動超過這條中線,向心力倒轉為-g。

這樣就會畫出上面側檢視的效果。

然後每個週期都新增一些這樣的點,畫出軌跡。如圖;

基本上這樣就已經完成了,我們不需要畫出完整的路徑,只要畫出最新的一段就可以。

當到達一定高度之後,就將這條線慢慢移除出去。就得到最終效果

**如下:

//向心加速度

34var

speed_y =-

1;//向上速度

35var

centerline =w

/2 ;

//龍捲風中線

36function

addline()]

48});49}

50}51function

step()64}

65obj.x

=obj.sx ;

66obj.y

=obj.sy ;

67obj.sx

=obj.g ;

68obj.g

=obj.x

>

obj.c ?-

g : g ;

69obj.list.unshift();

//記錄下質點運動軌跡

70obj.list

=obj.list.slice(

0,obj.len);

//僅僅畫出其中一段線就好

71//

畫出所有點的連線

龍捲風路徑 一列火車行駛時突然遭遇龍捲風

眾所周知,龍捲風是一種猛烈的天氣現象,小到汽車大到房子都能掀翻,但如果一列火車遇到龍捲風呢?這樣的事還真發生過!在2008年1月7日,一場ef3級龍捲風席捲了美國伊利諾伊州的哈佛市,沿途的樹木被颳倒,連小汽車也沒能倖免。隨後,龍捲風穿過芝加哥市,來到西北鐵路,直接將一列12節的火車掀翻。下圖是安裝在...

龍捲風摧毀停車場題解

這道題還是比較好做吧,就直接模擬求餘數的方法,用乙個陣列餘數是否出現過,並判斷是否在某乙個階段餘數是否為0,如果餘數為0或餘數出現過,說明是已經除完或第二次迴圈的開始,在此處跳出迴圈即可 ac code include using namespace std const int maxn 1e5 5...

HTML中的標記 遁地龍捲風

第三版 上一版本在未經驗證的情況下,盲目的認為很多東西是那樣,造成錯誤,非常抱歉。0.什麼是標記 input type checkbox checked 提示 這裡的checked id href title就是標記 1.布林標記 已checked為例 存在即應用,用來標記狀態,推薦寫法 setat...