HTML5中的canvas

本文原連接：https://blog.csdn.net/qq372072753/article/details/54629610

https://www.jianshu.com/p/e70c9cfbdb38

Canvas原理

Canvas這個概念最先在那裏提出，我沒查到，可如今好多地方都有，它都快無處不在了。下面從我看到的H5Canvas看看它有多牛逼。

在Html沒有增長Canvas標籤以前，網頁在繪製圖形圖片這一塊和客戶端相比就是原始社會，當時最牛的公司Adobe就比如當年的諾基亞，它的Flash，Flex,ActionScript技術佔據霸主地位。其實ActionScript很早就加入了Canvas概念，但因爲公司大，效率低，本身也不夠重視等緣由，致使發展緩慢。等到低迷了許久許久的html加入Canvas後，html彷佛在1級停留了十幾年一下就升了5級，忽然就反超了，Flash,Flex的風光瞬間被html5給搶走。

進入正題：

Canvas咱們把它翻譯成畫布，從字面意思咱們就能夠知道，不就是能夠在上面畫東西的布嗎。好像很簡單，沒什麼好說的。先看圖：

 

 

 

從這幾幅圖咱們能夠看到如下幾點：

1.每一個小方格咱們能夠看做一個像素點。

2.Canvas和Screen的長和寬決定他們的圖像數據存儲均可以看做是矩形數組(或Map)集合的大小，存儲圖像的容器就長的是這個樣子，他是矩形，也許有不規則的特殊屏，目前我只見過矩形的。

3.咱們最終看到的畫面是屏幕，Canvas的繪畫數據最終是要填充給屏幕數據。

 

那麼如今先來回顧一下計算機原理：

我不喜歡用太多的文字來解釋，看看百科找來了這張圖片，我相信能幫咱們更好的去理解。

結合這張圖，咱們能夠知道：輸出設備它只讀屏幕最終數據，Canvas數據只是寫入屏幕數據的一個緩存。爲何數據不直接寫入屏幕數據，後面會講跳幀具體說明。

有了畫布是否是應該有畫筆，畫布畫筆如影隨行。通常畫布都會帶有一個Graphics,

繪畫算法大多畫筆都封裝的有。我覺的Graphics是圖形庫裏面最總要的一個類。

網上找的一句Canvas優勢：提供的功能原始，適合像素處理，動態渲染和大數據量繪製。

 

Canvas在線程中的位置及聯繫：

幀速率是每秒主線程重繪的次數，通常每秒>=24幀人眼就區分不了重繪刷新了，這樣就能夠看到一個連續的動畫。

什麼是跳幀？

當Canvas繪畫所需的時間大於一次循環更新所需的時間，咱們的下一幀就不繪畫了，把時間留給上一幀繪畫，以此保證上一幀繪畫完整。若是兩幀的時間還畫不完說明fm須要調節。