這是一份你值得保存學(xué)習(xí)的HTML5技術(shù)干貨整理分享

1、這是一份你值得保存學(xué)習(xí)的html5技術(shù)干貨整理分享還記得在過去的web前端開發(fā)中，假如你需要繪圖或者生成相關(guān)圖形的話，用法flash可能是你唯一或者說最強大的實現(xiàn)方式，而在近些年的技術(shù)熱點html5標(biāo)準(zhǔn)中，html canvas（畫布）能夠越發(fā)便利的協(xié)助你實現(xiàn)2d繪制圖形圖像及其各種動畫效果功能。 首先我們先來了解一下什么是html canvas？我們可以在html中用法屬性width和height來定義canvas。但是實現(xiàn)canvas的相關(guān)功能主要還依靠于javascript實現(xiàn)，即html5 canvas api。我們用法javascript來拜訪和控制canvas相關(guān)的區(qū)域，比如調(diào)用相

2、關(guān)繪圖的辦法，用來動態(tài)的生成需要的動畫或者圖形。接下來我們來看看canvas的特性：互動性：canvas支持互動，可以很好的響應(yīng)用戶的操作，我們可以通過javascript來監(jiān)鍵盤，鼠標(biāo)，及其觸摸設(shè)備相關(guān)大事。動 畫：任何被canvas繪制的圖形都可以添加動畫，容易的彈跳球或者復(fù)雜的html5嬉戲都可以實現(xiàn)靈便性：開發(fā)人員可以用法canvas來繪制任何的內(nèi)容，比如，直線，圖形，文字，等，可以包含動畫或者不包含。同時你可以添加音頻或者視頻掃瞄器支持：幾乎全部的現(xiàn)代掃瞄器都支持，并且被廣泛的各種設(shè)備支持，例如，桌面，平板，智能手機等等。流行度：canvas目前很流行，無數(shù)的開發(fā)人員都用法它來開發(fā)類

3、似嬉戲或者繪圖類應(yīng)用web標(biāo)準(zhǔn)：只需要有掃瞄器就可以運行，而非flash或者silverlight，需要安裝相關(guān)的插件開發(fā)一次，任何掃瞄器都可以運行（固然，不包括老式掃瞄器）可以用法免費擁有大量的開發(fā)工具及其類庫。 用法html5 canvas我們能開發(fā)那些相關(guān)產(chǎn)品或者應(yīng)用呢？1 可視化數(shù)據(jù)： 各類統(tǒng)計圖表，比如:百度的echart2 場景秀：用canvas實現(xiàn)動態(tài)的廣告效果能夠十分融洽的跨平臺運行。如:手機中微產(chǎn)品.在移動端兼容性很好。 3 嬉戲：canvas在基于web的圖像顯示方面比flash越發(fā)立體、越發(fā)精巧，canvas成為html5小嬉戲開發(fā)首選?，F(xiàn)階段h5做嬉戲,營業(yè)方式不是很明

4、確. 25 超棒的 html5 canvas 嬉戲。4 其他可嵌入網(wǎng)站的內(nèi)容 (多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與web融合，并且不需要任何插件。5 趨勢= 模擬器： 無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以徹低由javascript來實現(xiàn)。模擬真切硬件環(huán)境,如移動端各種類型手機.6 趨勢= 遠(yuǎn)程計算機控制： canvas可以讓開發(fā)者更好地實現(xiàn)基于web的數(shù)據(jù)傳輸，構(gòu)建一個完善的可視化控制界面。7 趨勢= 圖形編輯器： photoshop圖形編輯器將能夠100%基于web實現(xiàn)。如何用法html5 canvas？用法html5 canvas其實十分容

5、易， 每一個canvas都擁有一個上下文（context）。用法它你可以來調(diào)用相關(guān)的畫布辦法。您的掃瞄器不支持html5 canvas以上代碼我們在html中添加了一個canvas標(biāo)簽，假如掃瞄器不支持canvas，會顯示標(biāo)簽的內(nèi)容，固然，假如你需要支持老式掃瞄器你也可以用法flash或者其它辦法來做一個替代的解決計劃。var canvas = document.getelementbyid(mycanvas),context = canvas.getcontext(‘2d’);以上代碼我們通過canvas取到2d的context。在html5 canvas的2d結(jié)構(gòu)中

6、，坐標(biāo)（0,0）在左上方，這和傳統(tǒng)的坐標(biāo)不太一樣。大家需要注重一下，如下圖所示： 下面來說一下canvas的api：canvas的主要屬性和辦法：save():保存當(dāng)前環(huán)境的狀態(tài)restore():返回之前保存過的路徑狀態(tài)和屬性createevent()getcontext():返回一個對象，指出使問繪圖功能須要的apitodateurl():返回canvas圖像的url色彩、樣式和陰影屬性和辦法：fillstyle:設(shè)置或返回用于填充繪畫的色彩、漸變或模式strokestyle:設(shè)置或返回用于筆觸的色彩、漸變或模式shadowcolor:設(shè)置或返回用于陰影的色彩shadowblur:設(shè)置或返

7、回用于陰影的含糊級別shadowoffsetx:設(shè)置或返回陰影距外形的水平距離shadowoffsety:設(shè)置或返回陰影距外形的垂直距離createlineargradient():創(chuàng)建線性漸變（用在畫布內(nèi)容上）createpattern():在指定的方向上重復(fù)指定的元素createradialgradient():創(chuàng)建發(fā)射狀/環(huán)形的漸變（用在畫布內(nèi)容上）addcolorstop():規(guī)定漸變對象中的色彩和停止位置線條樣式屬性和辦法linecap:設(shè)置或返回線條的結(jié)束端點樣式linejoin:設(shè)置或返回兩條線相交時，所創(chuàng)建的拐角類型linewidth:設(shè)置或返回當(dāng)前的線段寬度miterlimi

8、t:設(shè)置或返回最大斜接長度canvas的api-路徑辦法fill():填充當(dāng)前繪圖(路徑)stroke():繪制已定義的路徑beginpath():起始一條路徑，或重置當(dāng)前路徑moveto():把路徑移動到畫布中的指定點，不創(chuàng)建線條closepath():創(chuàng)建從當(dāng)前點回到起始點的路徑lineto():添加一個新點，創(chuàng)建從該點到最后指定點的線條clip():從原始畫布剪切隨意外形和尺寸的區(qū)域quadraticcurveto():創(chuàng)建二次貝塞爾曲線beziercurveto():創(chuàng)建三次貝塞爾曲線arc():創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）arcto():創(chuàng)建兩切線之間的弧/曲線ispoint

9、inpath():假如指定的點位于當(dāng)前路徑中，返回布爾值canvas的api-轉(zhuǎn)換辦法scale():縮放當(dāng)前繪圖至更大或更小rotate():旋轉(zhuǎn)當(dāng)前繪圖translate():重新映射畫布上的（0，0）位置transform():替換繪圖的當(dāng)前轉(zhuǎn)換矩陣settransform():將當(dāng)前轉(zhuǎn)換重置為單位矩陣，然后運行transform（）canvas的api-文本屬性和辦法font:設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性textalign:設(shè)置或返回文本內(nèi)容的當(dāng)前對齊方式textbaseline:設(shè)置或返回在繪制文本時用法的的當(dāng)前文本基線filltext():在畫布上繪制被填充的文本stroket

10、ext():在畫布上繪制文本（無填充）measuretext():返回包含指定文本寬度的對象canvas的api-圖像繪制辦法drawimage():向畫布上繪制圖像、畫布或視頻canvas的api-像素操作辦法和屬性width:返回imagedata對象的寬度height:返回imagedata對象的高度data:返回一個對象，其包含指定的imagedata對象的圖像數(shù)據(jù)createimagedata():創(chuàng)建新的、空白的i馬哥data對象getimagedata():返回imagedata對象，該對象為畫布上指定的矩形復(fù)制像素數(shù)據(jù)putimagedata():把圖像數(shù)據(jù)（從指定的imagedata對象）放回畫布上canvas的api-圖像合成屬性globalalpha:設(shè)置或返回繪圖的當(dāng)前alpha或透亮值globalcompositeoperation:設(shè)置或返回新圖像如何繪制到已有的