這是一份你值得保存學習的HTML5技術干貨整理分享

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

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

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

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

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

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

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

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

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

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