Html5 Canvas 功能的索引使用

Created: November-22, 2018

畫布的功能

Canvas 允許你以程式設計方式繪製到你的網頁：

畫布圖紙可以廣泛設計：

畫布的用途

圖紙可以組合並定位在畫布上的任何位置，因此可用於建立：

油漆/草圖應用，
快節奏的互動遊戲，
資料分析，如圖表，圖表，
像 Photoshop 一樣的成像，
類似 Flash 的廣告和華麗的網路內容。

Canvas 允許你操作影象的紅色，綠色，藍色和 Alpha 元件顏色。這允許畫布操作具有類似於 Photoshop 的結果的影象。

在畫素級別重新著色影象的任何部分（如果使用 HSL，你甚至可以在保留重要的光照和飽和度的同時重新著色影象，因此結果看起來不像是某人在影象上拍了一些油漆），
敲除影象中某個人/專案周圍的背景，
檢測和填充影象的一部分（例如，將使用者點選的花瓣的顏色從綠色變為黃色 - 只需點選花瓣！），
做透視翹曲（例如在杯子的曲線周圍包裹影象），
檢查影象的內容（例如，面部識別），
回答有關影象的問題：停車位的這張圖片中是否有停放的車？
應用標準影象濾鏡（灰度，棕褐色等）
應用你可以想象的任何異國情調的影象濾鏡（Sobel Edge Detection），
合併影象。如果親愛的祖母蘇無法與家人團聚，只需將 photoshop 她帶入團圓的形象。不喜歡考辛菲爾 - 只是“把他拉出來，
播放視訊/從視訊中抓取一幀，
將畫布內容匯出為 .jpg | .png 影象（你甚至可以選擇裁剪或註釋影象並將結果匯出為新影象），

關於移動和編輯畫布圖紙（例如建立動作遊戲）：

在畫布上繪製某些內容後，無法移動或編輯現有圖形。畫布圖可移動這種常見的誤解值得澄清： 現有的畫布圖不能編輯或移動！
畫布繪製速度非常快。Canvas 可以在幾分之一秒內繪製數百個影象，文字，線條和曲線。它在可用時使用 GPU 來加速繪圖。
畫布通過快速重複繪製某些東西然後將其重新繪製到新位置來建立運動的幻覺。像電視一樣，這種不斷的重繪會讓人眼前一亮。