很多購物網站現在都支持360實物全景圖像，可以360度任意選擇查看樣品，這樣對購買者來說是一個很好的消費體驗，網上有很多這樣的插件都是基于jQuery實現的有收費的也有免費的，其實很好用的一個叫3deye.js的插件。該插件支持桌面與移動終端iOS與Android， 它的demo程序：http://www.voidcanvas.com/demo/28823deye/

自己玩了玩這個Demo以后，照著它的思路，用HTML5 Canvas也實現了類似的功能。

所以先說一下它的360度全景圖的原理

1. 首先需要對實物拍照，間隔是每張照片旋轉15度，所以需要23張照片。
2.照片準備好了以后，盡量選擇JPG格式，裁剪到適當大小。
3.JavaScript中預加載所有照片，可以配合進度條顯示加載精度
4.創建/獲取Canvas對象，加上鼠標監聽事件，當鼠標左右移動時候，適度的繪制不同幀。大致的原理就是這樣，簡單吧！

實現代碼：

 !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 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 quot;loaded() Auto Play /button  /body  /html 

Demo演示文件下載地址- fullview_jb51.rar

相關推薦：

怎樣用H5 Canvas實現3D動態Chart圖表

html2 canvas實現瀏覽器截圖

JS+canvas繪制的動態機械表動畫效果

以上就是HTML5 Canvas實現360度全景方法的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。