媒體型別和畫布
本主題將介紹各種媒體型別以及它們如何與 2D 介面中的畫布一起使用。
媒體型別具有通用和格式特定類別
媒體型別
- 動畫
- 影片
- 圖片
- 高清影象
- 向量影象
- 動畫圖片
媒體格式
- JPG / JPEG
- PNG
- GIF
- SVG
- M-JPEG
- WEBM
- WebP 的
圖片
瀏覽器支援各種各樣的影象格式，但沒有瀏覽器支援它們。如果你有特定的影象格式，你希望使用 Wiki 瀏覽器和支援的影象格式提供了一個很好的概述。
最好的支援是 3 種主要格式，jpeg，png 和 gif，所有主流瀏覽器都提供支援。
JPEG
JPEG 影象最適合照片和照片，如影象。他們並沒有很好地藉助圖表，圖表和文字。JPEG 影象不支援透明度。
Canvas 可以通過 canvas.toDataURL 和 canvas.toBlob 輸出 JPEG 影象，並提供高質量的設定。由於 JPEG 不支援透明度，因此最終輸出 JPG 的任何透明畫素都將與黑色混合。生成的影象不是畫布的完美副本。
PNG
PNG 影象是最高質量的影象，還可以包含透明畫素的 Alpha 通道。影象資料被壓縮但不會產生像 JPG 影象那樣的偽像。
由於無失真壓縮和 alpha 通道支援，PNG 用於遊戲，ui 元件影象，圖表，圖表，文字。當它們用於照片和照片一樣的影象時，它們的檔案大小可能比 JPEG 大得多。。
雖然瀏覽器支援有限，但 PNG 格式也提供動畫支援，並且只能通過 Javascript API 和庫訪問用於畫布的動畫。
雖然輸出格式僅限於壓縮的 32 位 RGBA，但畫布可用於通過 canvas.toDataURL 和 canvas.toBlob 編碼 PNG 影象。PNG 將提供畫布的畫素完美副本。
GIF
GIF 用於短動畫，但也可用於提供高質量的圖表，圖表和文字，如影象。GIF 的色彩支援非常有限，每幀最多 256 種顏色。使用切割器影象處理 gif 影象可以產生令人驚訝的好結果，尤其是在動畫時。Gif 還提供透明度，但這僅限於開啟或關閉
與 PNG 一樣，GIF 動畫無法直接在畫布上使用，你需要使用 Javascript API 或庫才能訪問。無法通過畫布儲存 GIF，並且需要 API 和庫來執行此操作。