一、什么是canvas?(了解)
· 是HTML5提供的一種新標(biāo)簽
<canvas></canvas>
英 ['k?nv?s] 美 ['k?nv?s] 帆布 畫布
· Canvas是一個矩形區(qū)域的畫布,可以用JavaScript在上面繪畫??刂破涿恳粋€像素。
· canvas 標(biāo)簽使用 JavaScript 在網(wǎng)頁上繪制圖像,本身不具備繪圖功能。
· canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
· HTML5之前的web頁面只能用一些固定樣式的標(biāo)簽:比如p、div、h1等,但有了canvas Web頁面可以可以豐富多彩。
二、canvas主要應(yīng)用的領(lǐng)域
1. 游戲:canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧,canvas游戲在流暢度和跨平臺方面更牛。 25 超棒的 HTML5 Canvas 游戲
2. 可視化數(shù)據(jù).數(shù)據(jù)圖表話,比如:百度的echart
3. banner廣告:Flash曾經(jīng)輝煌的時代,智能手機(jī)還未曾出現(xiàn)?,F(xiàn)在以及未來的智能機(jī)時代,HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用,用Canvas實(shí)現(xiàn)動態(tài)的廣告效果再合適不過。
4. 未來=> 模擬器:無論從視覺效果還是核心功能方面來說,模擬器產(chǎn)品可以完全由JavaScript來實(shí)現(xiàn)。
5. 未來=> 遠(yuǎn)程計算機(jī)控制:Canvas可以讓開發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸,構(gòu)建一個完美的可視化控制界面。
6. 未來=> 圖形編輯器:Photoshop圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。
7. 其他可嵌入網(wǎng)站的內(nèi)容(多用于活動頁面、特效):類似圖表、音頻、視頻,還有許多元素能夠更好地與Web融合,并且不需要任何插件。
8. 完整的canvas移動化應(yīng)用
9. 我們課程的目標(biāo)
o 我們不是主要做游戲開發(fā)的
o 要求必須會做基本的用canvas繪制的特效頁面:比如,傳智前端官網(wǎng)。
o 會用canvas做一些簡單的廣告、活動頁面
10. 我們課程的案例和項(xiàng)目演示
11. canvas的標(biāo)準(zhǔn):
o 目前來說,標(biāo)準(zhǔn)還在完善中。先用早期的api足夠完成所有的應(yīng)用
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布,希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。






