生活随笔
收集整理的這篇文章主要介紹了
HTML5 Canvas实现360度全景图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
很多購物網(wǎng)站現(xiàn)在都支持360實物全景圖像，可以360度任意選擇查看樣品，這樣
對購買者來說是一個很好的消費體驗，網(wǎng)上有很多這樣的插件都是基于JQuery實現(xiàn)的
有收費的也有免費的，其實很好用的一個叫3deye.js的插件。該插件支持桌面與移動終
端iOS與Android， 它的demo程序：http://www.voidcanvas.com/demo/28823deye/
自己玩了玩這個Demo以后，照著它的思路，用HTML5 Canvas也實現(xiàn)了類似的功能。
所以先說一下它的360度全景圖的原理
1.??????首先需要對實物拍照，間隔是每張照片旋轉(zhuǎn)15度，所以需要23張照片。
2.??????照片準備好了以后，盡量選擇JPG格式，裁剪到適當大小。
3.??????JAVASCRIPT中預(yù)加載所有照片，可以配合進度條顯示加載精度
4.??????創(chuàng)建/獲取Canvas對象，加上鼠標監(jiān)聽事件，當鼠標左右移動時候，適度的繪制不
同幀。大致的原理就是這樣，簡單吧！
實現(xiàn)代碼：
[html]?view plaincopy
<!DOCTYPE?html>??<html>??<head>????<meta?charset=utf-8">????<title>Full?360?degree?View</title>????<script>??????????var?ctx?=?null;?//?global?variable?2d?context??????????var?frame?=?1;?//?23??????????var?width?=?0;??????????var?height?=?0;??????????var?started?=?false;??????????var?images?=?new?Array();??????????var?startedX?=?-1;????????window.onload?=?function()?{??????????var?canvas?=?document.getElementById("fullview_canvas");??????????canvas.width?=?440;//?window.innerWidth;??????????canvas.height?=?691;//window.innerHeight;??????????width?=?canvas.width;??????????height?=?canvas.height;??????????var?bar?=?document.getElementById('loadProgressBar');??????????for(var?i=1;?i<24;?i++)??????????{??????????????bar.value?=?i;??????????????if(i<10)??????????????{??????????????????images[i]?=?new?Image();??????????????????images[i].src?=?"0"?+?i?+?".jpg";??????????????}??????????????else???????????????{??????????????????images[i]?=?new?Image();??????????????????images[i].src?=?i?+?".jpg";??????????????}??????????}??????????ctx?=?canvas.getContext("2d");????????????????????//?mouse?event??????????canvas.addEventListener("mousedown",?doMouseDown,?false);??????????canvas.addEventListener('mousemove',?doMouseMove,?false);??????????canvas.addEventListener('mouseup',???doMouseUp,?false);??????????//?loaded();????????????????????//?frame?=?1??????????frame?=?1;??????????images[frame].onload?=?function()?{??????????????redraw();??????????????bar.style.display?=?'none';??????????}??????}??????function?doMouseDown(event)?{??????????var?x?=?event.pageX;??????????var?y?=?event.pageY;??????????var?canvas?=?event.target;??????????var?loc?=?getPointOnCanvas(canvas,?x,?y);??????????console.log("mouse?down?at?point(?x:"?+?loc.x?+?",?y:"?+?loc.y?+?")");??????????startedX?=?loc.x;??????????started?=?true;??????}????????????function?doMouseMove(event)?{??????????var?x?=?event.pageX;??????????var?y?=?event.pageY;??????????var?canvas?=?event.target;??????????var?loc?=?getPointOnCanvas(canvas,?x,?y);??????????if?(started)?{??????????????var?count?=?Math.floor(Math.abs((startedX?-?loc.x)/30));??????????????var?frameIndex?=?Math.floor((startedX?-?loc.x)/30);??????????????while(count?>?0)??????????????{?????????????????????????????????console.log("frameIndex?=?"?+?frameIndex);??????????????????count--;??????????????????????if(frameIndex?>?0)??????????????????{??????????????????????frameIndex--;??????????????????????frame++;??????????????????}?else?if(frameIndex?<?0)??????????????????{??????????????????????frameIndex++;??????????????????????frame--;??????????????????}??????????????????else?if(frameIndex?==?0)??????????????????{??????????????????????break;??????????????????}????????????????????????????????????????????????????if(frame?>=?24)??????????????????{??????????????????????frame?=?1;??????????????????}??????????????????if(frame?<=?0)??????????????????{??????????????????????frame?=?23;??????????????????}??????????????????redraw();??????????????}??????????}??????}????????????function?doMouseUp(event)?{??????????console.log("mouse?up?now");??????????if?(started)?{??????????????doMouseMove(event);??????????????startedX?=?-1;??????????????started?=?false;??????????}??????}????????function?getPointOnCanvas(canvas,?x,?y)?{??????????var?bbox?=?canvas.getBoundingClientRect();??????????return?{?x:?x?-?bbox.left?*?(canvas.width??/?bbox.width),??????????????????y:?y?-?bbox.top??*?(canvas.height?/?bbox.height)??????????????????};??????}????????????function?loaded()?{??????????setTimeout(?update,?1000/8);??????}??????function?redraw()??????{??????????//?var?imageObj?=?document.createElement("img");??????????//?var?imageObj?=?new?Image();??????????var?imageObj?=?images[frame];??????????ctx.clearRect(0,?0,?width,?height)??????????ctx.drawImage(imageObj,?0,?0,?width,?height);??????}??????function?update()?{??????????redraw();??????????frame++;??????????if?(frame?>=?23)?frame?=?1;??????????setTimeout(?update,?1000/8);??????}????</script>??</head>??<body>??<progress?id="loadProgressBar"?value="0"?max="23"></progress>???<canvas?id="fullview_canvas"></canvas>??<button?onclick="loaded()">Auto?Play</button>??</body>??</html>??
Demo演示文件下載地址->http://download.csdn.net/detail/jia20003/6670901
總結(jié)
以上是生活随笔為你收集整理的HTML5 Canvas实现360度全景图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
