前言

　　H5是怎麼實現全景圖片播放呢？

正文

　　全景圖的基本原理即 "等距圓柱投影"，這是一種將球體上的各個點投影到圓柱體的側面上的一種投影方式，投影后再展開就是一張 2:1 的矩形圖片。

　　全景圖並不是一個新概念，其實就是一種廣角圖（玩單反的 很懂了）

　　用 "全景播放器" 渲染全景圖，可以讓觀看者身臨其境地進入到全景圖所記錄的場景中。

　　微博，facebook等是支援360度檢視全景圖的，可以去體驗一下

　　還有一個很好的例子，就比如一張展開的地圖，通過等距投影到地球儀。

　　全景圖的視野：人在球內中心，無論你怎麼移動 都有畫面，恩想象自己在球中心

那web前端工程師，該如何實現呢？

　　那先了解一下什麼是webGL？

　　WebGL (Web圖形庫) 是一種JavaScript API，用於在任何相容的Web瀏覽器中呈現互動式3D和2D圖形，而無需使用外掛。
　　舉栗子：

<canvas  id='glcanvas'></canvas >   

<script>
    const canvas = document.querySelector("#glcanvas");
    const gl = canvas.getContext("webgl");
</script>

　　畫布已經準備好了，任君大放異彩