原文：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. debiand上安装thunderbird

    deb包下载地址 http://sourceforge.net/projects/ubuntuzilla/files/mozilla/apt/pool/main/t/thunderbird-mozil ...

  2. HDU 3667 费用流 拆边 Transportation

    题意: 有N个城市,M条有向道路,要从1号城市运送K个货物到N号城市. 每条有向道路<u, v>运送费用和运送量的平方成正比,系数为ai 而且每条路最多运送Ci个货物,求最小费用. 分析: ...

  3. Maven本地库在哪？

    Maven的本地存储库是一个本地文件夹,用于存储你的所有项目的依赖项(插件Jars和其他Maven下载的文件).简单的说,当你建立一个Maven项目,所有依赖文件将存储在Maven的本地库. 默认情况 ...

  4. ccna学习指南第七版

    1.加电post自检    闪存查找ios 可随时从命令行进入设置模式,为此可在特权模式下输入setup    ctrl+c退出特权模式 6.2cli   命令行界面 进入cli router> ...

  5. java作业 4

    public class dog { /**  * @param args  */ public static void main(String[] args) {  // TODO Auto-gen ...

  6. C#拆箱和装箱成本

    从原理上可以看出,装箱时,生成的是全新的引用对象,这会有时间损耗,也就是造成效率降低. 文章:.Net常见面试题整理(2)——装箱和拆箱 装箱,产生新的引用对象,并且赋值,然后引用. 拆箱,往往跟随着 ...

  7. 关闭chrome浏览器的input香蕉黄背景

    chrome浏览器input的自动完成,点击之后自动输入,input的背景会变成香蕉黄,用如下方法修复: /* Change the white to any color ;) 就是给input设置内 ...

  8. jquery工具方法总结

    $.extend 对象合并,支持深拷贝 $.each 相当于array.each或object.each,可以遍历数组和对象 $.grep 相当于array.filter $.map 相当于array ...

  9. 刷题总结——ball（ssoj）

    题目: 题目背景 SOURCE:NOIP2015-SHY-9 题目描述 Alice 与 Bob 在玩游戏.他们一共玩了 t 轮游戏.游戏中,他们分别获得了 n 个和 m 个小球.每个球上有一个分数.每 ...

  10. jacoco功能测试覆盖率统计

    1.在java程序的启动脚本(或者tomcat)中加入javaagent参数-javaagent:/home/apps/jacocoagent.jar=destfile=/home/apps/jaco ...