整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個開源的HTML5流媒體播放器——PearPlayer.js。
PearPlayer是完全用JavaScript寫的開源HTML5流媒體播放框架，實現了融合HTTP（含HTTPS、HTTP2）和WebRTC的多協議、多源、低延遲、高帶寬利用率的無插件Web客戶端流媒體加速能力。基于H5的MSE（Media Source Extension）技術將來自多個源節點的Buffer分塊喂給播放器，再加上精心設計的算法可實現最優的調度策略及對各種異常情況的處理，PearPlayer由此能在保證用戶流暢視頻體驗的前提下最大化P2P率。
首先通過script標簽導入pear-player.min.js：
<script src="./dist/pear-player.min.js"></script>或者使用CDN：
<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>假設用video標簽播放以下視頻，HTML如下：
<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>只需以下幾行代碼，即可將PearPlayer綁定到video標簽：
<script>
/**
* 第一個參數為video標簽的id或class
* opts是可選的參數配置
*/
if (PearPlayer.isMSESupported()) {
var player = new PearPlayer('#pearvideo', opts);
}
</script>至此，就已經添加播放器了，無需任何插件。
開源地址：https://gitee.com/PearInc/PearPlayer.js
記得在過去的Web前端開發中，如果你需要繪圖或者生成相關圖形的話，使用Flash可能是你唯一或者說最強大的實現方式，而在近些年的技術熱點HTML5標準中，HTML Canvas（畫布）能夠更加方便的幫助你實現2D繪制圖形圖像及其各種動畫效果功能。
首先我們先來了解一下什么是HTML Canvas？
我們可以在HTML中使用屬性width和height來定義Canvas。但是實現Canvas的相關功能主要還依賴于Javascript實現，即HTML5 Canvas API。我們使用javascript來訪問和控制Canvas相關的區域，比如調用相關繪圖的方法，用來動態的生成需要的動畫或者圖形。
接下來我們來看看canvas的特性：
互動性：Canvas支持互動，可以很好的響應用戶的操作，我們可以通過Javascript來監鍵盤，鼠標，及其觸摸設備相關事件。
動 畫：任何被canvas繪制的圖形都可以添加動畫，簡單的彈跳球或者復雜的HTML5游戲都可以實現
靈活性：開發人員可以使用Canvas來繪制任何的內容，比如，直線，圖形，文字，圖片等，可以包含動畫或者不包含。同時你可以添加音頻或者視頻瀏覽器支持：幾乎所有的現代瀏覽器都支持，并且被廣泛的各種設備支持，例如，桌面，平板，智能手機等等。
流行度：canvas目前很流行，很多的開發人員都使用它來開發類似游戲或者繪圖類應用
web標準：只需要有瀏覽器就可以運行，而非flash或者silverlight，需要安裝相關的插件
開發一次，任何瀏覽器都可以運行（當然，不包括老式瀏覽器）
可以使用免費擁有大量的開發工具及其類庫。
使用HTML5 Canvas我們能開發那些相關產品或者應用呢？
1 可視化數據： 各類統計圖表，比如:百度的echart
2 場景秀：用Canvas實現動態的廣告效果能夠非常融洽的跨平臺運行。如:手機中微產品.在移動端兼容性很好。
3 游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小游戲開發首選。現階段h5做游戲,營業方式不是很明確. 25 超棒的 HTML5 Canvas 游戲。
4 其他可嵌入網站的內容 (多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。
5 趨勢=> 模擬器： 無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現。模擬真實硬件環境,如移動端各種類型手機.
6 趨勢=> 遠程計算機控制： Canvas可以讓開發者更好地實現基于Web的數據傳輸，構建一個完美的可視化控制界面。
7 趨勢=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基于Web實現。
如何使用HTML5 Canvas？
使用HTML5 canvas其實非常簡單， 每一個canvas都擁有一個上下文（context）。使用它你可以來調用相關的畫布方法。
<canvas id="mycanvas" width="500" height ="400">
<p>您的瀏覽器不支持HTML5 Canvas</p>
</canvas>
以上代碼我們在HTML中添加了一個canvas標簽，如果瀏覽器不支持canvas，會顯示<p>標簽的內容，當然，如果你需要支持老式瀏覽器你也可以使用flash或者其它方法來做一個替代的解決方案。
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext(‘2d’);
以上代碼我們通過canvas取到2D的context。
在HTML5 Canvas的2D結構中，坐標（0,0）在左上方，這和傳統的坐標不太一樣。大家需要注意一下，如下圖所示：
下面來說一下canvas的API：
canvas的主要屬性和方法：
save():保存當前環境的狀態
restore():返回之前保存過的路徑狀態和屬性
createEvent()
getContext():返回一個對象，指出訪問繪圖功能必要的API
toDateURL():返回canvas圖像的URL
顏色、樣式和陰影屬性和方法：
fillStyle:設置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle:設置或返回用于筆觸的顏色、漸變或模式
shadowColor:設置或返回用于陰影的顏色
shadowBlur:設置或返回用于陰影的模糊級別
shadowOffsetX:設置或返回陰影距形狀的水平距離
shadowOffsetY:設置或返回陰影距形狀的垂直距離
createLinearGradient():創建線性漸變（用在畫布內容上）
createPattern():在指定的方向上重復指定的元素
createRadialGradient():創建放射狀/環形的漸變（用在畫布內容上）
addColorStop():規定漸變對象中的顏色和停止位置
線條樣式屬性和方法
lineCap:設置或返回線條的結束端點樣式
lineJoin:設置或返回兩條線相交時，所創建的拐角類型
lineWidth:設置或返回當前的線段寬度
miterLimit:設置或返回最大斜接長度
Canvas的API-路徑方法
fill():填充當前繪圖(路徑)
stroke():繪制已定義的路徑
beginPath():起始一條路徑，或重置當前路徑
moveTo():把路徑移動到畫布中的指定點，不創建線條
closePath():創建從當前點回到起始點的路徑
lineTo():添加一個新點，創建從該點到最后指定點的線條
clip():從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo():創建二次貝塞爾曲線
bezierCurveTo():創建三次貝塞爾曲線
arc():創建弧/曲線（用于創建圓形或部分圓）
arcTo():創建兩切線之間的弧/曲線
isPointInPath():如果指定的點位于當前路徑中，返回布爾值
Canvas的API-轉換方法
scale():縮放當前繪圖至更大或更小
rotate():旋轉當前繪圖
translate():重新映射畫布上的（0，0）位置
transform():替換繪圖的當前轉換矩陣
setTransform():將當前轉換重置為單位矩陣，然后運行transform（）
Canvas的API-文本屬性和方法
font:設置或返回文本內容的當前字體屬性
textAlign:設置或返回文本內容的當前對齊方式
textBaseline:設置或返回在繪制文本時使用的的當前文本基線
fillText():在畫布上繪制“被填充的”文本
strokeText():在畫布上繪制文本（無填充）
measureText():返回包含指定文本寬度的對象
Canvas的API-圖像繪制方法
drawImage():向畫布上繪制圖像、畫布或視頻
Canvas的API-像素操作方法和屬性
width:返回ImageData對象的寬度
height:返回ImageData對象的高度
data:返回一個對象，其包含指定的ImageData對象的圖像數據
createImageData():創建新的、空白的I馬哥Data對象
getImageData():返回ImageData對象，該對象為畫布上指定的矩形復制像素數據
putImageData():把圖像數據（從指定的ImageData對象）放回畫布上
Canvas的API-圖像合成屬性
globalAlpha:設置或返回繪圖的當前alpha或透明值
globalCompositeOperation:設置或返回新圖像如何繪制到已有的圖像上
直接使用Canvas來繪制圖形相對來說比較乏味并且麻煩，所以在現代的HTML5 Canvas中我們使用一些現成的第三方類庫幫助我們多快好省的實現圖形繪制的功能：
KineticJS
Paper.js
EaselJS
Fabric.js
oCanvas
Echart.js
2002年的表格布局逐漸被淘汰，是因為：表格是用來承載數據的，并不是用來劃分網頁結構的。
2009年就已經推出了HTML5的草案，但直到2014年才有定稿，是因為有移動端的推動。
H5草案的前身是叫：Web Application，最早是由WHATWG這個組織在2004年提出的。
2007年被 W3C 組織接納，并在 2008-01-22 發布 HTML5 的第一個草案。
HTML5并不僅僅只是作為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成為第一個將Web做為應用開發平臺的HTML語言。
HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用。我們甚至可以結合 Canvas 開發網頁版游戲。
HTML5
的廣義概念：HTML5代表瀏覽器端技術的一個發展階段。在這個階段，瀏覽器的呈現技術得到了飛躍發展和廣泛支持，它包括：HTML5、CSS3、Javascript API在內的一套技術組合。
HTML5不等于HTML next version。
HTML5包含：HTML的升級版、CSS的升級版、JavaScript API的升級版。
總結：HTML5是新一代開發 Web 富客戶端應用程序整體解決方案。包括：HTML5，CSS3，Javascript API在內的一套技術組合。
富客戶端：具有很強的交互性和體驗的客戶端程序。比如說，瀏覽博客，是比較簡單的客戶端；一個在線聽歌的網站、即時聊天網站就是富客戶端。
PS：單純地從技術的角度講，兼容性問題只會讓開發者徒增煩惱。如果網頁端的程序能做到PC客戶端的體驗，就會對后者構成威脅。
列舉幾個HTML5 的應用場景：
（1）極具表現力的網頁：內容簡約而不簡單。
（2）網頁應用程序：
（3）混合式本地應用。
（4）簡單的游戲。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
