最近也是因為在學習關於 canvas 的知識，所以今天就想和大家分享乙個關於彈幕的故事
那麼究竟彈幕是怎樣煉成的呢？ 我們且往下看(look) 看什麼？看效果
效果圖已經呈現給各位了，那麼是不是有點小激動呢？是的，感慨萬分，思緒寧亂，無語凝噎 無論以後我們的工作中是否會遇到這樣的需求，也請給自己乙個增加技能的機會吧！！ 本次彈幕的效果，專案結構如下圖所示
專案整體已經給出，那麼我們就擼起袖子加油幹吧。
讓彈幕飛
上面我們提到了 canvas 的事情，所以呢，這就是製作彈幕了。我們利用 canvas 繪圖來實現彈幕的功能
首先，我們先給出html的結構
// index.html檔案
// 引入index.js檔案用來實現彈幕功能複製**
// index.js檔案
let data = [,,
,];複製**
獲取 dom 元素
// index.js檔案
// 模擬資料
...省略
// 獲取到所有需要的dom元素
let doc = document;
let canvas = doc.getelementbyid('canvas');
let video = doc.getelementbyid('video');
let $txt = doc.getelementbyid('text');
let $btn = doc.getelementbyid('btn');
let $color = doc.getelementbyid('color');
let $range = doc.getelementbyid('range');
複製**
下面我們將用物件導向的方式來實現canvas繪製彈幕的功能，之所以選擇用這種方式主要是方便復用和後續新增方法；
下面我們先來建立乙個canvasbarrage類，主要用做canvas來渲染整個彈幕； 在實現之前，我們先來呼叫一下，看看是如何建立例項的。 // index.js檔案 // 模擬資料 ...省略 // 獲取到所有需要的dom元素 ...省略 // 建立canvasbarrage類 class canvasbarrage // 建立canvasbarrage例項 let canvasbarrage = new canvasbarrage(canvas, video, );
實現 canvasbarrage
我們在「得到所有的彈幕訊息」那裡，通過陣列的 map 方法返回的還是個陣列，不過返回的內容是乙個 barrage類，這是為什麼呢？ 還記得之前說過麼，用類的好處就是方便擴充套件，後續再新增方法的話可以直接在該類中新增即可。
所以我們也不推崇直接map方法裡直接返回乙個{}這種形式
// 不推薦
this.barrages = this.data.map(item => );
複製**
// index.js檔案
++++++++++++++++++++++
// 建立barrage類，用來例項化每乙個彈幕元素
class barrage
} ++++++++++++++++++++++
class canvasbarrage
複製**
render 一下
接著上面的 canvasbarrage 類裡 render 方法繼續寫，我們來把 todo 完成
todo都做了什麼？
1、清除之前畫布所有的繪製，防止繪製重疊的影響
2、渲染真正的彈幕資料 (還未實現)
3、判斷是否繼續渲染彈幕
4、遞迴呼叫render
but，在此之前，我們要先寫個別的，它就是barrage類 因為還需要它來大顯身手一下呢，每乙個彈幕的例項都由它來製造
建立 barrage 類
彈幕製造者來了，下面我們就來實現一下這個barrage類，看它都具備哪些屬性和方法，繼續todo吧
todo都做了什麼？
1、從傳入的obj中取到必要的value和time
this.value = obj.value; // 內容
this.time = obj.time; // 時間
複製**
3、渲染每個彈幕
以上三步就是整個barrage類所做的事情了。barrage這個類都已經敲完了，那麼接下來開始真正的渲染步驟吧
renderbarrage才是主角
此時我們再新增乙個觸發彈幕的事件，讓彈幕飛起來
大家一起寫到了這裡，也是時候展示一下成果了，往下看
別急，讓彈幕再飛一會兒
渲染彈幕的功能，我們已經完成了，接下來讓我們馬不停蹄的寫下如何發彈幕吧。別猶豫，開擼！！！
發彈幕
發彈幕相對來說還是很簡單的，獲取到 value, time, color, fontsize 之後把他們當作物件傳給 canvasbarrage 的 add方法進行新增就好了 下面我們再寫一下add方法，回到canvasbarrage類裡繼續寫
// index.js檔案
class canvasbarrage
render()
renderbarrage()
clear()
+++++++++++++++++++++++++++
add(obj)
+++++++++++++++++++++++++++
}複製**
暫停和拖動
讓我們再次回到canvasbarrage這個類上
ok，寫到這裡，所有關於彈幕功能的**就全部結束了！！
如果工作中讓你開發彈幕功能，你也可以在多敲幾遍以上**之後，得心應手的保證完成任務了。
敬請期待，下節更精彩
接下來我們再利用 websocket 和 redis 來進行一下較為實戰的功能吧。
高手是怎樣練成的
高手成長的六個階段 程式設計師怎樣才能達到程式設計的最高境界？最高境界絕對不是你去編兩行 或者是兒分鐘能寫幾行 或者是用什麼所謂的視覺化上具產生最少的 這些工作，這都不是真正的高手境界。即使足這樣的高手，那也都是無知者的自封。我認為，乙個程式設計師的成長可分為如下六個階段 第一階段 此階段主要是能熟...
心態是怎樣練成的？（下）
今天，我想和 高手 或有能力成為 高手 或希望成為 高手的朋友說幾句話。國慶節期間，我看了一點有關於私募 的話題，特別看了一點但斌先生的部落格文章，了解了一點 精英人物的處境與心態。不可否認，他們是我國 市場的精英人物。他們的知識面 他們的經驗與閱歷都屬於非凡一族。他們是贏家，一般來說他們不會被市場...
Linux操作高手是怎樣「練」成的
現在是使用linux的時候了。這個免費的開放源 作業系統正以狂風暴雨之勢襲卷著整個世界，它不僅出現在企業伺服器和專業怪才們的討論組中，也開始在家用pc機上生根了。linux的普及程度正在與日俱增，因此我們想，大概已是讓我們幫你掌握linux的時候了。linux並不適合電腦新手，但只要有耐心，再加上z...