原文：http://blog.csdn.net/jia20003/article/details/17172571

很多购物网站现在都支持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<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

HTML5 Canvas实现360度全景图的更多相关文章

  1. 安卓端360度全景图的html5实现

    这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光. 此处引入了ddpanorama插件,它的原理是在canvas上绘制全景 ...

  2. 利用Canvas实现360度浏览

    前言:最近几个月来到新公司,主要从事移动端方面的开发,有时候也挺忙挺累的,于是就好一段时间没写博客了.其实自己在这几个月里,自己对canvas以及createjs和egret都有了一定程度上的认识与掌 ...

  3. html5人物图片360度立体旋转

    体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...

  4. Three.js制作360度全景图

    这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...

  5. JS+CSS3 360度全景图插件 - Watch3D.js

    日常闲扯 从上一篇文章到这篇中间快过了一年了,时间真滴过得快.不是在下中间没想过写新的文章,而是自己确实变懒了(体重+1 +1 +1 +1....) ..OTL...不过到最后觉得还是需要写点东西,不 ...

  6. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

  7. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  8. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  9. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

随机推荐

  1. 蓝桥--2n皇后问题（递归）--搬运+整理+注释

    N皇后问题: #include <iostream> #include <cmath> using namespace std; int N; ];//用来存放算好的皇后位置. ...

  2. python for data analysis chapter1~2

    Q1:numpy与series的区别:index Tab补全(任意路径Tab) 内省(函数:?显示文档字符串,??显示源代码:结合通配符:np.* load *?) %load .py ctrl-c( ...

  3. Linux安装Scala

    下载Scala地址http://downloads.typesafe.com/scala/2.10.6/scala-2.10.6.tgz然后解压Scala到指定目录 tar -zxvf scala-2 ...

  4. 常用软件URL

    1.MSDN:https://msdn.itellyou.cn/ 2.软碟通(UltraISO)http://rj.baidu.com/soft/detail/11522.html?ald Ultra ...

  5. js 页面刷新 每N秒钟刷新一次页面

    <!-- 每5秒钟刷新一次页面 -->     <script>setTimeout("location=location; ", 5000); </ ...

  6. Leetcode 466.统计重复个数

    统计重复个数 定义由 n 个连接的字符串 s 组成字符串 S,即 S = [s,n].例如,["abc", 3]="abcabcabc". 另一方面,如果我们可 ...

  7. 《机器学习实战》笔记——regression

    本章介绍了不同场景下使用的线性回归方法 一般情况:简单的线性回归 欠拟合:局部加权线性回归 特征数大于样本数:岭回归 或 lasso法 最后引出交叉验证,用来定量地找到最佳参数值 # _*_ codi ...

  8. CentOS7下RabbitMQ服务安装配置胜多负少

    RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.RabbitMQ据说具有良 ...

  9. UVA11367 Full Tank? 【分层图最短路】

    题目 After going through the receipts from your car trip through Europe this summer, you realised that ...

  10. websphere启用高速缓存导致问题

    环境:websphere 7 一个流程主页,里面include了上面这个页面,内部有一个iframe: 现象:项目发布在测试环境中,打开流程主页时,里面iframe内页显示不出来: 同样的jsp页面, ...