Canvas學習系列一 初識canvas

2021-08-02 11:26:05 字數 2137 閱讀 2905

最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。

1. canvas介紹

canvas元素的出現,可以說開啟的web世界繪製動畫,圖形的大門,其功能非常強大

canvas 元素是html5中功能最強大的元素,它的能力主要是通過canvas中的context(繪圖上下文/繪圖環境)物件表現出來的。該物件從canvas本身獲取。

var canvas = getelementbyid('canvas');

var context = canvas.getcontext('2d');

2. canvas的後備內容canvas元素之間包含的文字,這種文字稱為 "後備內容",只有在瀏覽器不支援canvas元素時才會顯示該文字內容

當前瀏覽器不支援canvas元素,請更換瀏覽器
3. canvas的尺寸canvas元素時預設寬為300px、高為150px。

我們可以通過canvas的width,height屬性去修改canvas的大小,我們也可通過css去修改canvas元素的大小。但是二者的修改是有區別的。

canvas實際上有兩套尺寸:

乙個是canvas元素的大小,乙個是canvas繪圖表面的大小。

當我們用canvas的屬性width,height時實際上我們同時修改了元素的大小與繪圖表面的大小

當我們用css來設定時,是會修改canvas元素的大小,不會影響繪圖表面的大小,這時瀏覽器就會對繪圖表面縮放,會出現我們不想得到的效果

width與height屬性修改canvas尺寸大小時的表現

當前瀏覽器不支援canvas,請更換瀏覽器

用css去修改canvas元素尺寸大小時的表現

所以我們在設定canvas元素的大小時,最好不要使用css去設定,我們可以這麼去設定

當前瀏覽器不支援canvas,請更換瀏覽器
或者

4. canvas apicanvas元素並未提供很多api,它只提供了兩個屬性三個方法,而繪圖功能的方法與屬性全都是canvas的繪圖環境(context)物件提供。

width:設定/獲取canvas元素繪圖表面的寬度,預設值為300。

height:設定/獲取canvas元素繪圖表面的高度,預設值為150。

getcontext(): 返回canvas元素的繪圖環境物件。

todataurl(): 描述:返回乙個data uri:會根據type指定的引數形式將canvas中的編碼成乙個utf-16字串的形式。

tobold(): 描述:建立blob物件,用以展示canvas上的;這個檔案可以被快取或儲存到本地,由user agent( 使用者**端 )自行決定。

todataurl():

type 可選引數

格式,預設為 image/png

encoderoptions 可選引數

當格式為 image/jpeg 或 image/webp的情況下,可以從 0 到 1 的區間內選擇的質量。

如果超出取值範圍,將會使用預設值 0.92,預設解析度為96dpi。

這裡值得注意:

儘管在預設情況下canvas物件是一副位圖,但是並不是html中的img元素,所以我們可以利用todataurl方法建立一幅表示canvas的影象;也可以利用此方法建立和操作緩衝canvas。 

tobold():

目前該方法只有firefox與ie10瀏覽器支援

Canvas學習系列一 初識canvas

最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現,可以說開啟的web世界繪製動畫,圖形的大門,其功能非常強大 canvas 元素是html5中功能最強大的元素,它的能力主要...

從零學習 CA 系列

近期由於專案需要,開始轉向 ca 證書相關的知識惡補中,都很少寫日誌了。廢話少說,進入正題,本人之前沒有接觸過加密,也就更沒有接觸過 認證相關的知識,如下內容為學習過程中個人體會。數字證書通常可分為兩大類,根據證書持有者分類和根據金鑰分類。根據證書持有者是否為 ca 進行分類 根據證書持有者是否為 ...

Dubbo學習系列 初識

dubbo能解決什麼問題 怎麼去維護url 通過註冊中心去維護url zookeeper redis memcache f5硬體負載均衡器的單點壓力比較大 軟負載均衡。自動去整理各個服務之間的依賴。如果伺服器的呼叫量越來越大,伺服器的容量問題怎麼去評估,擴容的指標 需要乙個監控平台,可以監控呼叫量 ...