HTML5 Canvas实现360度全景图的示例代码

很多购物网站现在都支持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;
     i24;
 i++)          {
                  bar.value = i;
              if(i10)              {
                      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演示文件下载地址-> fullview_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！