国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WebAssembly Demo之Canvas中隨機(jī)運(yùn)動(dòng)圓球

時(shí)飛 / 3131人閱讀

摘要：不過因?yàn)闆]有隨機(jī)時(shí)間種子，所以，不管設(shè)定的時(shí)間間隔多短暫，這一個(gè)隨機(jī)序列的每個(gè)值都是新鮮隨機(jī)出來的，即與上一個(gè)隨機(jī)值重復(fù)的概率僅等于隨機(jī)范圍分之一。

作者：云荒杯傾

1、Demo功能介紹

實(shí)現(xiàn)了一個(gè)圓球在800px * 600px畫布內(nèi)隨機(jī)運(yùn)動(dòng)，固定時(shí)間間隔隨機(jī)運(yùn)動(dòng)一次，運(yùn)動(dòng)方向由x和y軸組成的向量決定，這個(gè)向量是隨機(jī)值（后面會(huì)稱它為隨機(jī)向量），從C語(yǔ)言代碼中的隨機(jī)函數(shù)獲取，JS代碼實(shí)現(xiàn)小球的畫布渲染、越界糾正等工作。

Demo同時(shí)實(shí)現(xiàn)了純JS（即不使用WebAssembly）和WebAssembly兩個(gè)版本，都在Demo地址中。

2、Demo地址

github倉(cāng)庫(kù)
查看演示1 ：一個(gè)不顯示軌跡的小球demo
查看演示2 ：一個(gè)顯示運(yùn)動(dòng)軌跡的小球demo
查看演示3：一個(gè)小球平移demo

3、Demo目錄結(jié)構(gòu)

因?yàn)閐emo比較簡(jiǎn)單，也沒有什么js庫(kù)依賴，所以本庫(kù)的所有demo都是按照目錄區(qū)分的（一個(gè)目錄是一個(gè)demo，億一共四個(gè)），而沒有使用諸如src、doc、dist之類的結(jié)構(gòu)。

canvasDemo-wasm1：C代碼中未加隨機(jī)時(shí)間種子的一種實(shí)現(xiàn)，因此每次刷新HTML頁(yè)面實(shí)際上產(chǎn)生的是同一個(gè)隨機(jī)序列，也就是說每次刷新頁(yè)面后，若觀察小球的運(yùn)動(dòng)軌跡，都是一樣的。不過因?yàn)闆]有隨機(jī)時(shí)間種子，所以，不管JS setInerval設(shè)定的時(shí)間間隔多短暫，這一個(gè)隨機(jī)序列的每個(gè)值都是新鮮隨機(jī)出來的，即：與上一個(gè)隨機(jī)值重復(fù)的概率僅等于隨機(jī)范圍分之一。因此，這種實(shí)現(xiàn)下，小球的運(yùn)動(dòng)軌跡在canvas內(nèi)的分布更加的均勻。
canvasDemo-wasm2 :C代碼中加了隨機(jī)時(shí)間種子的一種實(shí)現(xiàn)，小球移動(dòng)不均勻，因?yàn)殡S機(jī)種子的時(shí)間粒度比較粗，而隨機(jī)運(yùn)動(dòng)的時(shí)間間隔遠(yuǎn)小于這個(gè)時(shí)間粒度，所以同一對(duì)隨機(jī)值（矢量）會(huì)連續(xù)重復(fù)好幾次，這就造成了小球某次運(yùn)行實(shí)際上并不隨機(jī)的效果。

注:上面兩種實(shí)現(xiàn)只有下面兩句C代碼的差別：
#include
srand(time(NULL))
再注：wasm1和wams2兩個(gè)demo本質(zhì)是一個(gè)。僅僅是因?yàn)镃語(yǔ)言中的隨機(jī)時(shí)間種子問題，多帶帶多寫了一個(gè)。

canvasDemo-JS版本: 是canvasDemo-wasm1 demo的純JS實(shí)現(xiàn)的版本。跟wasm沒有關(guān)系。
translate-wasm:實(shí)現(xiàn)小球從左到右平移運(yùn)動(dòng)的demo，wasm實(shí)現(xiàn)，使用的wasm的API，沒有用膠水代碼。

4、canvasDemo-wasm1 Demo中主要函數(shù)介紹 C語(yǔ)言部分

有三個(gè)函數(shù)

函數(shù)名 參數(shù) 返回值 描述
Radom int m,int n int x 使用c語(yǔ)言的rand（）函數(shù)生成m和n之間的整數(shù)，以x返回。
randomInTwoSection int m,int n int x 給定一個(gè)隨機(jī)區(qū)間，如果生成的隨機(jī)值在左半邊，則生成一個(gè)負(fù)的移動(dòng)值，以x返回；反之，x返回正的移動(dòng)值
randomGenerator int xpos,int ypos,int radius char* a 給定當(dāng)前小球在畫布內(nèi)的位置：[xpos,ypos]和小球半徑，生成下一次移動(dòng)的向量，之所以有半徑參數(shù)傳入，是設(shè)定了一個(gè)規(guī)則，如果小球pos加減radius已經(jīng)到達(dá)canvas邊界，則下次移動(dòng)，某個(gè)方向的隨機(jī)值必須為負(fù)。比如已經(jīng)到達(dá)左邊界，則下次運(yùn)動(dòng),X方向的隨機(jī)數(shù)必須是正數(shù)，小球才會(huì)向右滾動(dòng)，否則會(huì)出左邊界。
JS部分

功能1：初始化canvas
功能2：run函數(shù)，內(nèi)部是接受C代碼傳過來的隨機(jī)向量，賦給canvas的ctx.arc()以畫圓。
功能3：設(shè)定移動(dòng)變換的時(shí)間間隔。

5、編譯C代碼過程解釋

本demo使用的emscripten編譯命令為：

emcc -o a.html a.c -Os -s WASM=1 --shell-file shell_minimal.html

執(zhí)行完，會(huì)生成，一個(gè)a.HTML，一個(gè)a.wasm，一個(gè)a.js。
加上a.c和shell_minimal.html，共五個(gè)文件。所以第3節(jié)中的random和random2目錄下都有這5個(gè)文件，為方便大家重復(fù)編譯，還附加了1個(gè)使用的編譯命令的文本文件。

說明：
（1）a.c，a.html中的a是舉例，自己開發(fā)編譯時(shí) 請(qǐng)按實(shí)際的c文件名稱和想要輸出的html文件名；
（2）-Os是優(yōu)化參數(shù)，生成的a.js是已經(jīng)壓縮過的，這是膠水代碼，它里面有引用生成的a.wasm，有使用WebAssembly API，如WebAssembly.memory和WebAssembly.Table()等；不加就不壓縮，js體積變大；
（3）shell_minimal.html是模板文件，7KB大小，有一些膠水代碼，按官方說法，不建議自己寫模板。關(guān)于到底使用什么開發(fā)模式，用asm?用wasm?用wasm的話用不用膠水代碼？這幾個(gè)問號(hào)分別對(duì)應(yīng)什么編譯命令？若想理清以上幾個(gè)問題，請(qǐng)關(guān)注以下網(wǎng)址：https://kripken.github.io/ems...

注：為啥要寫一下我demo中使用的編譯命令呢？因?yàn)閑mcc的命令選項(xiàng)實(shí)在是太多了，稍微有點(diǎn)不一樣，編譯出來的wasm就不同，導(dǎo)致報(bào)錯(cuò)之類。
6、Demo使用或查看 
直接運(yùn)行canvasDemo-wasm1和canvasDemo-wasm1目錄下的HTML文件應(yīng)該不行，因?yàn)槭莊tp協(xié)議，fetch之類的函數(shù)會(huì)報(bào)錯(cuò)，建議git clone后到webstorm開發(fā)環(huán)境，這樣直接運(yùn)行html文件就可以了。

可以寫個(gè)node server跑一下。
或者直接用http-server庫(kù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/91935.html

相關(guān)文章

  • WebAssembly和Emscripten工作整理

    摘要：寫在前面之前做過一段時(shí)間的的研究，寫過幾個(gè)，并且閱讀并翻譯了很多篇官方文檔，今天對(duì)這些東西做一個(gè)總結(jié)。主要是以鏈接形式提供，并附上簡(jiǎn)短的說明。歡迎加入和技術(shù)交流群，群聊號(hào)碼 寫在前面 之前做過一段時(shí)間的WebAssembly的研究，寫過幾個(gè)WebAssembly Demo，并且閱讀并翻譯了很多篇Emscripten官方文檔，今天對(duì)這些東西做一個(gè)總結(jié)。如果有需要對(duì)這塊知識(shí)了解的同學(xué)，就可...

    qieangel2013 評(píng)論0 收藏0

  • 一步步實(shí)現(xiàn)nest粒子特效

    摘要：嘗試實(shí)現(xiàn)畫出一個(gè)彈射的小球很簡(jiǎn)單，那怎么用多個(gè)小球?qū)崿F(xiàn)這樣的效果呢。 本文首發(fā)于我的博客，這是我的github，歡迎star。 ??這篇博客是模仿nest.js實(shí)現(xiàn)一個(gè)demo，由簡(jiǎn)單到復(fù)雜，來一步步的實(shí)現(xiàn)它。這里是效果預(yù)覽。我的github里邊還有很多別的前端的demo，喜歡的話可以點(diǎn)個(gè)star，你的支持就是我的動(dòng)力。 從一道面試題開始 實(shí)現(xiàn)一個(gè)半徑10px的小球在500px*5...

    ky0ncheng 評(píng)論0 收藏0

  • 裝逼的最高境界---一行js代碼完成一個(gè)簡(jiǎn)易版的貪吃蛇游戲

    摘要：有些奇淫技巧玩好的話，就能提升自己的逼格，這不，一行代碼實(shí)現(xiàn)一個(gè)貪吃蛇小游戲就成了裝逼到了最高境界嘛代碼如下當(dāng)前瀏覽器不支持標(biāo)簽游戲結(jié)束我不是來裝逼的。 有些奇淫技巧玩好的話，就能提升自己的逼格，這不，一行js代碼實(shí)現(xiàn)一個(gè)貪吃蛇小游戲就成了裝逼到了最高境界嘛！代碼如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

    hidogs 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<