整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
對于文件上傳，我們并不陌生，HTML自帶了上傳文件表單，但是我們都知道，那些真的滿足不了我們的大多數(shù)需求，諸如多選、預(yù)覽、刪除、拖拽等各類繁雜的功能，原生的文件上傳Input確實很難滿足我們的需求，因此就誕生了很多第三方的上傳組件，比如大家熟知的百度WebUploader、之前我也有介紹過類似的組件，功能都非常豐富，大家可以根據(jù)自己的需求酌情選擇，符合自己的需要才是最好的，當然原生的或許就夠了呢！
https://github.com/kartik-v/bootstrap-fileinput
此項目一共多大一千多次提交，60+發(fā)布以及，4k+star，可見還是很受廣大開發(fā)者的認可的！
以下是借助翻譯將功能大致描述下：
1、Bootstrap 3.x和4.x的增強型HTML 5文件輸入以及各種文件的文件預(yù)覽，提供多種選擇，可恢復(fù)的塊上傳等；
2、該插件允許您使用一種簡單的方法來設(shè)置高級文件選擇器/上傳控件，該控件專為Bootstrap 3.x或4.x CSS3樣式而設(shè)計；
3、它通過提供支持來預(yù)覽各種文件，即圖像，文本，html，視頻，音頻，閃存和對象，進一步增強了文件輸入功能。
4、此外，它還包括基于AJAX的上傳，拖放文件，查看上傳進度以及有選擇地預(yù)覽，添加或刪除文件。
【1】使用bower
bower install bootstrap-fileinput
【2】使用npm
npm install bootstrap-fileinput
【3】初始化，例如
//默認
$("#input-id").fileinput();
// 外加插件
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
文件輸入功能（翻譯+意譯）：
1、該插件將簡單的HTML文件輸入轉(zhuǎn)換為高級文件選擇器控件。對于不支持JQuery或Javascript的瀏覽器，將有助于回退到正常的HTML文件輸入。
2、文件輸入包含以下三個部分，其中包含用于控制顯示的選項和模板：
3、type = file如果設(shè)置了插件，插件會自動將輸入轉(zhuǎn)換為高級文件選擇器輸入class = file。輸入的所有選項都可以作為HTML5 data屬性傳遞 。
4、能夠選擇和預(yù)覽多個文件。使用HTML 5文件閱讀器API來讀取和預(yù)覽文件。如果選擇了多個文件，則顯示正在加載到預(yù)覽區(qū)域的文件的進度。
5、提供預(yù)定義的模板和CSS類，可根據(jù)需要更改為文件輸入顯示的樣式。
6、能夠配置插件以顯示帶有初始標題的圖像/文件的初始預(yù)覽 （對于記錄更新方案更有用）。參考initialPreview， initialPreviewConfig，和 initialCaption 插件選項部分中的屬性用于配置此屬性。
7、能夠?qū)?nèi)容縮放為詳細預(yù)覽。在預(yù)覽中查看縮放內(nèi)容的幻燈片，最大化為無邊框或全屏預(yù)覽。
8、能夠通過拖放在初始預(yù)覽中對內(nèi)容進行排序/重新排列。
9、能夠完全控制窗口小部件并控制樣式和布局。
10、通過語言環(huán)境/翻譯支持同一頁面上的多語言小部件。
11、顯示/隱藏以下任何或所有內(nèi)容的選項：
12、自定義目標容器元素的位置以顯示整個插件，標題容器，標題文本，預(yù)覽容器，預(yù)覽圖像和預(yù)覽狀態(tài)。
13、對于文本文件預(yù)覽，將文本自動換行到縮略圖寬度，并顯示環(huán)繞指示符以在懸停時顯示完整文本。您可以自定義換行指示符（默認為...）。
14、自定義預(yù)覽，進度和所選文件的信息。
15、上傳操作默認為表單提交。支持上傳路由/服務(wù)器操作參數(shù)，用于基于自定義ajax的上傳
16、觸發(fā)JQuery事件以進行高級開發(fā)。目前可用的事件是filereset， fileclear，filecleared，fileloaded，和fileerror。
17、已禁用和只讀文件輸入支持。
18、動態(tài)自動調(diào)整超過容器寬度的長文件名的文件標題。
19、提升fileimageuploaded在預(yù)覽容器上完全加載圖像后觸發(fā)的新事件。
20、當預(yù)覽圖像超出預(yù)覽容器的大小時自動調(diào)整大小。
21、完全模板化和可擴展，允許以開發(fā)人員想要的方式配置文件輸入。
22、基于各種文件預(yù)覽類型預(yù)覽智能。內(nèi)置的文件支持類型分類為 image，text，html，video，audio，flash， object，和other。
23、allowedPreviewTypes：您現(xiàn)在可以配置允許將哪些文件類型顯示為預(yù)覽。默認為['image', 'html', 'text', 'video', 'audio', 'flash', 'object']。因此，默認情況下，所有文件類型都被視為要預(yù)覽的對象。對于只有exampleTo預(yù)覽image 和video，你可以將其設(shè)置為['image', 'video']。要禁用所有文件類型的內(nèi)容預(yù)覽并將其顯示previewIcon為縮略圖，請將其設(shè)置為null，empty或false。
24、allowedPreviewMimeTypes：除此之外allowedPreviewTypes，您還可以控制可以顯示哪些mime類型以供預(yù)覽。默認為null，表示支持所有mime類型。>注意：對于2.5.0版，您現(xiàn)在可以通過設(shè)置allowedFileTypes和控制允許上載哪些文件類型或擴展名allowedFileExtensions。
25、layoutTemplates：允許您在一個屬性中配置所有布局模板設(shè)置?？膳渲玫牟季值膶ο笫牵簃ain1，main2， preview，caption，和modal。
26、previewTemplates：每種預(yù)覽類型的所有預(yù)覽模板都已合并為一個屬性，而不是圖像，文本等的單獨模板。鍵是設(shè)置的格式allowedPreviewTypes，值是用于預(yù)覽的模板。下面是每個預(yù)覽文件類型（默認預(yù)置的模板generic，image，text，html， video，audio，flash，object，和other）。該generic模板僅用于initialPreview使用直接標記顯示 內(nèi)容。
27、previewSettings：允許您為每個預(yù)覽圖像類型配置寬度和高度。該插件具有默認的寬度和預(yù)定義的每個類型，即高度 image，text，html，video，audio，flash，和object。
28、fileTypeSettings：允許您使用回調(diào)配置和標識每個預(yù)覽文件類型。該插件具有預(yù)定義識別不同類型即默認回調(diào) image，text，html，video，audio，flash，和object。
29、替換模板中的標簽已得到增強。使用此版本，它將自動檢查要在模板字符串中替換的每個標記的多次出現(xiàn)。
30、通過在任何其他事件中將輸出返回到中止上載，操作事件并輕松添加自己的自定義驗證消息。
31、支持多語言和區(qū)域設(shè)置。
好用的插件千千萬，當你正缺少這樣一個強大的文件上傳組件時，bootstrap-fileinput或許能幫到你，它雖然不是我用過最好的，但至少能符合很多場景下的需求了，特別適合對于文件上傳非常頻繁的時候來說，真的非常有用，希望能給你帶來幫助，當然您如果有更好的推薦，則感謝在評論區(qū)留言分享！
PS：筆者近期想深入的學(xué)習(xí)下Javascript,小伙伴們知道現(xiàn)在有什么書籍比較合適么，網(wǎng)絡(luò)上的系統(tǒng)化的較少，想要系統(tǒng)的深入學(xué)習(xí)下，感謝推薦的道友們！
好了，接下來，我們?yōu)榇蠹乙灰唤榻B一些在web開發(fā)技術(shù)中人氣超高的HTML5特效欣賞。
1.滑動觸發(fā)
騰訊視頻：這一幕你期待已久
長頁HTML5，滑動觸發(fā)動效，和呆板的幻燈片式樣的HTML5頁面拉開了距離。Epub360雖然能實現(xiàn)帶動效帶觸發(fā)的長頁，但是目前暫時還不能實現(xiàn)這種滑動觸發(fā)動畫。
百度百科：序列幀動畫是只在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動畫。 因為逐幀動畫的幀序列內(nèi)容不一樣，不但給制作增加了負擔(dān)而且最終輸出的文件量也很大，但它的優(yōu)勢也很明顯：逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似與電影的播放模式，很適合于表演細膩的動畫。例如：人物或動物急劇轉(zhuǎn)身、頭發(fā)及衣服的飄動、走路、說話以及精致的3D效果等等。
百度百科：為模擬現(xiàn)實中的水、火、霧、氣等效果由各種三維軟件開發(fā)的制作模塊，原理是將無數(shù)的單個粒子組合使其呈現(xiàn)出固定形態(tài)，借由控制器，腳本來控制其整體或單個的運動，模擬出現(xiàn)真實的效果。
簡而言之，就是讓SVG的描邊像是有人繪制一樣的動畫效果。動畫輕巧不失真，特別適合那些崇尚簡約設(shè)計風(fēng)格的網(wǎng)頁。
全線性動畫可以理解為動畫連續(xù)，幾乎不間斷播放，像視頻一樣流暢細膩。
這支HTML5頁面打破了傳統(tǒng)幻燈片式的呈現(xiàn)方式，塑造出了一種寬廣、素雅、幽靜的整體感受，該作品也被很多人推崇為HTML5里的動畫片。
虛擬全景美術(shù)館的概念并不新鮮。其鼻祖應(yīng)該是 Google 的 Art Project，讓你能夠在線瀏覽全世界大多數(shù)博物館和美術(shù)館。杜蕾斯“美術(shù)館”的創(chuàng)新，在于它其實是熱門廣告形式HTML5頁面的偽裝?！拔覀兿胍ㄟ^多重手段（比如館內(nèi)的彩蛋、12 點閉館無法訪問等等）來創(chuàng)造一個虛擬的真實空間，而不是傳統(tǒng)HTML5的單線程教育的邏輯?！?Socialab 杜蕾斯組的負責(zé)人說，“液體主義群展將是杜蕾斯美術(shù)館無數(shù)展覽中的第一個。”
祝福燈籠可以360旋轉(zhuǎn)呈現(xiàn)，而且具有夜空繁星中題字燈籠飛來飛去的3D炫目效果，彰顯“最飛羊的新春祝愿”。其中意趣和精妙所在，恐非文字所能表述。
“點擊屏幕”不新鮮，但是這種屏幕擊碎的畫面好像也特別討人喜歡，大概有三輪左右的“擊碎”動作，這是整個HTML5的互動高峰。發(fā)現(xiàn)這種“屏幕敲擊”的常規(guī)動作特別有慣性，點一點就停不下來。是不是抓住了手機族的某些“強迫癥”特點。
整個HTML5頁面用打字機的形式呈現(xiàn)，隨著用戶按下按鈕，紙片會逐漸顯示出韓寒從1999年起，為人熟知或不知的成長軌跡。觸發(fā)逐字等動效很有真實感。
什么是Cinemegraphic？如果你不知道，就有點OUT了。顧名思義，Cinema是電影，Graph是圖片，Cinemagraphic是一項將神奇的局部運動賦予靜態(tài)照片的新技術(shù)。
其中Cinemagraphic的應(yīng)用恰到好處地了詮釋了“自然風(fēng)”的概念，只見畫面上，人物的頭發(fā)和衣角飛舞著，仿佛吹拂著一陣陣自然風(fēng)，在炎炎夏日，他們依舊感受著清爽，盡情玩耍。作為互動者的人們，當看到畫面上被風(fēng)拂過的Cinemagraphic動態(tài)場景，他們也身臨其境地感受到自然風(fēng)所能帶來的這種清爽感受。
下面說說和交互相關(guān)的動畫特效。
本期文章的最后簡單總結(jié)一個觀點：現(xiàn)在網(wǎng)頁上的圖片已不再是10年前的那種低分辨率靜態(tài)圖片了，在Web開發(fā)的未來必定是要更加多樣化，更加豐富多彩，更加方便用戶交互的頁面。 HTML5應(yīng)用恰好可以達到這個要求，大家可以看一下幾款超贊的HTML5動畫的高級特效，效果相當驚艷。
TML5是萬維網(wǎng)的核心語言、標準通用標記語言下的一個應(yīng)用超文本標記語言（HTML）的第五次重大修改，為了順應(yīng)整個互聯(lián)網(wǎng)時代變遷，使得人們能夠以更好的方式去進行網(wǎng)頁結(jié)構(gòu)搭建，HTML5應(yīng)運而生。HTML5新增了如下幾個方面你的特性：
一、語義特性（Class：Semantic）
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。
HTML結(jié)構(gòu)語義化，是最近幾年才提出來的，以前的html結(jié)構(gòu)，都是一堆沒有語義的冷冰冰的標簽。最泛濫的就是div+css，以前的頁面，一打開就是一堆div+css，為了改變這種這種狀況，開發(fā)者們和官方提出了讓HTML結(jié)構(gòu)語義化的概念，并且w3c也在HTML5給出了幾個新的語義化的標簽。
語義化之后文檔會有什么效果呢？就是你寫的HTML結(jié)構(gòu)，是用相對應(yīng)的有一定語義的英文字母（標簽）表示的，標記的，因為HTML本身就是標記語言。不僅對自己來說，容易閱讀，書寫。別人看你的代碼和結(jié)構(gòu)也容易理解，甚至對一些不是做網(wǎng)頁開發(fā)的人來說，也容易閱讀。。
怎么知道自己的頁面結(jié)構(gòu)是否語義化，那就要看HTML布局結(jié)構(gòu)，在去掉CSS樣式表之后，是否，依然能很好的呈現(xiàn)內(nèi)容的代碼結(jié)構(gòu)。也就是說，去掉CSS的裝飾之后，整個HTML的結(jié)構(gòu)閱讀起來依舊主次分明，能夠看清其整體的架構(gòu)模塊。這也就是，語義化之后我們想要HTML文檔達到的效果。
其實語義化，也無非就是自己在使用標簽的時候在合適的場景下選取合適的標簽，比如h1~h5系列標簽，在HTML中就是就是用來定義標題；而p標簽，大部分情況下用以處理文字段落，table表格則適合做信息表格,等等。
我們對整個HTML結(jié)構(gòu)進行語義化的規(guī)范操作有如下幾個好處：
1，這樣有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；
2，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以有意義的方式來渲染網(wǎng)頁；
3，便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
HTML5中新增的語義化標簽進一步加強了我們針對整個HTML結(jié)構(gòu)進行語義化跟進的可操作性，使得我們網(wǎng)頁布局的可閱讀性更高。
常見的HTML5語義化標簽及其使用場景如下：
<article>
定義頁面獨立的內(nèi)容區(qū)域。
<aside>
定義頁面的側(cè)邊欄內(nèi)容。
<command>
定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕
<details>
用于描述文檔或文檔某個部分的細節(jié)
<dialog>
定義對話框，比如提示框
<summary>
標簽包含 details 元素的標題
<figure>
規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figcaption>
定義 <figure> 元素的標題
<footer>
定義 section 或 document 的頁腳。
<header>
定義了文檔的頭部區(qū)域
<mark>
定義帶有記號的文本。
<meter>
定義度量衡。僅用于已知最大和最小值的度量。
<nav>
定義導(dǎo)航鏈接的部分。
<progress>
定義任何類型的任務(wù)的進度。
<section>
定義文檔中的節(jié)（section、區(qū)段）。
<time>
定義日期或時間。
二、本地存儲特性（Class: OFFLINE & STORAGE）
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。
早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速，這些數(shù)據(jù)不會被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上，它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。
客戶端存儲數(shù)據(jù)的兩個對象為：
localStorage - 用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除。
sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。
不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
三、連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進行通訊。
我們使用WebSocket 與Ajax的長輪詢做對比，從而感受WebSocket 的優(yōu)勢所在，其對比圖如下：
四、網(wǎng)頁多媒體特性(Class: MULTIMEDIA)
支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
video元素，在HTML5中專門用來播放網(wǎng)絡(luò)上的視頻或者電影。
audio元素，在HTML5中專門用來播放網(wǎng)絡(luò)上的音頻。
使用video和audio元素進行播放時就不在需要使用其他的插件了，只要我們的瀏覽器支持HTML5就可以。
瀏覽器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都對audio元素和video元素支持！
1，基本使用方法
audio元素只需要給他指定一個src屬性：
<audio src="MP3.mp3" controls="controls"></audio>
對于不支持的瀏覽器我們可以在這對元素之間加入提示語句來代替
<audio src="MP3.mp3" controls="controls">您的瀏覽器不支持Audio元素</audio>
video元素要設(shè)定好長寬和src屬性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同樣對于不支持video的瀏覽器可以在中間加入替換文字：
<video width="750" height="400" src="time.mp4">您的瀏覽器不支持video元素</video>
source元素指定多個播放格式與編碼：
source元素可以為同一個媒體數(shù)據(jù)指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放。選擇順序自上而下，直到選擇到所支持的格式為止。
使用方法：
<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>
各種設(shè)備對編碼格式的支持情況：
webm(.webm)格式的視頻 火狐4.0+、chrome6.0+、opera10.6+
mp4(.m4v)格式的視頻 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+
ogg(.ogv)格式的視頻 火狐3.5+、chrome3.0+、opera10.5+
mp4(.mp4)格式的視頻 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+
2、viedo與audio的常用屬性
audio元素和video元素的常用屬性
src屬性：在這個屬性里面指定媒體數(shù)據(jù)的URL地址。
controls屬性：指定是否為視頻或者音頻數(shù)據(jù)添加瀏覽器自帶的播放控制條，控制條中有播放按鈕、暫停等按鈕。
width和height屬性（video獨有）：指定視頻的寬度與高度。
autoplay屬性：這個屬性指定是否當我們網(wǎng)頁加載完成之后就開始自動播放。
preload屬性：這個屬性指定是否對數(shù)據(jù)進行預(yù)加載，如果是的話，瀏覽器會將視頻數(shù)據(jù)或者音頻數(shù)據(jù)進行緩沖，這樣做可以加快播放的速度。
preload屬性的三個值：
none 表示不進行預(yù)加載。
metadata 表示只預(yù)加載媒體的元數(shù)據(jù)。
auto(默認值) 表示預(yù)加載全部的視頻或者音頻。
2，使用Javascript提供的方法操作多媒體。
Javascript為我們提供了豐富的方法，用以靈活控制多媒體文件，這樣我們就可以根據(jù)實際的項目需求，定義自己的多媒體播放器。
其中controls屬性經(jīng)過設(shè)定，會在界面中顯示一個瀏覽器自帶的控制條。如果對于UI沒有要求的需求，其內(nèi)置控制器已經(jīng)可以滿足大部分的需求。隱藏控制條并模擬：那么實現(xiàn)一個自定義功能的播放器關(guān)鍵就在于，我們不使用原生的控制器，將其隱藏掉之后，在下方同樣的位置通過HTML、CSS來模擬所需樣式，同時通過js來調(diào)用video標簽所暴露給我們的接口函數(shù)及屬性，以及檢測用戶的操作行為來同步的模擬UI與視頻播放數(shù)據(jù)的相應(yīng)變化。
幾個核心函數(shù)及屬性的用法：
myVid=document.getElementById("video1");//控制視頻開關(guān)
myVid.play() // 觸發(fā)媒體文件的播放
myVid.pause() //觸發(fā)媒體文件的暫停
myVid.currentTime=5; //返回或設(shè)定當前視頻播放位置
myVid.duration // 返回視頻總長度
myVid.volume //控制音量大小
myVid.muted //控制多媒體是否靜音
五、三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
<canvas>是一個可以使用腳本(通常為JavaScript)來繪制圖形的 HTML 元素.例如,它可以用于繪制圖表、制作圖片構(gòu)圖或者制作簡單的(以及不那么簡單的)動畫. 右邊的圖片展示了一些 <canvas> 的實現(xiàn)示例。
使用 <canvas> 元素不是非常難但你需要一些基本的HTML和JavaScript知識。一些過時的瀏覽器不支持<canvas> 元素，但是所有的新版本主流瀏覽器都支持它。Canvas 的默認大小為300像素×150像素（寬×高，像素的單位是px）。但是，可以使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。為了在 Canvas 上繪制圖形，我們使用一個JavaScript上下文對象，它能動態(tài)創(chuàng)建圖像（ creates graphics on the fly）
隨著大數(shù)據(jù)等領(lǐng)域的發(fā)展及應(yīng)用，canvas繪圖在數(shù)據(jù)可視化方面扮演了重要的角色，可以讓我們靈活地通過各種形式展示數(shù)據(jù)，提高數(shù)據(jù)的可讀性，增強產(chǎn)品的數(shù)據(jù)能力。
下圖展示了canvas在數(shù)據(jù)可視化方面的應(yīng)用效果：
綜上，HTML5新功能的出現(xiàn)，使得前端在很多新的應(yīng)用領(lǐng)域發(fā)揮出了更加強大的能力，也讓很多已有項目在表現(xiàn)形式上有了更好的選擇。私信【前端】領(lǐng)取web前端開發(fā)/html5學(xué)習(xí)視頻。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
