原文：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. HDU：4185-棋盘游戏

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descri ...

  2. WPF使用异步+绑定的方式处理大数据量

    WPF的优势在于界面处理,即使是这样,在面对大数据量的时候也免不了界面假死,同一个线程里处理界面跟大数据量,这是不可避免的.解决办法还是有的,可以使用分页加载,虚拟加载,动态加载,增加条件限制... ...

  3. matlab callback 数据传递

    M文件中内的每个Callback都可以视为一个独立的可执行的接口,因此,任一个Callback触发后所执行的运算值若要在其他Callback中使用,就无法与MATLAB工作空间内的变量继续执行操作,也 ...

  4. 《Scrum实战》第0次课【如何学习敏捷】全团课后任务汇总

    <Scrum实战>第0次课作业 完成情况: 课程名称:如何学习敏捷 1组 孟帅 孟帅: http://www.cnblogs.com/mengshuai1982/p/7096338.htm ...

  5. ATM源码

    package atm;//张秋亮,信1705-3,20173529 public class Account { private String accountID; private String a ...

  6. body标签相关

    03-body标签中相关标签   今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一 ...

  7. python学习-- class 类中需要注意的地方

    from django.db import models class Person(models.Model):     name = models.CharField(max_length=30) ...

  8. Coursera无法观看课程解决方案

    Coursera无法观看课程解决方案 最近Cousera一直表现不佳,课程视频无法观看.小编结合网上找到的信息,操作一番便解决了问题,视频也可以正常观看了. 首先是win+s找到记事本,并用管理员身份 ...

  9. 使用PHPExcel单元格样式添加不上的原因

    按照文档上的样式设置方法设置样式,一直不成功.后来发现是得要在创建了sheet,并选择某一个sheet作为活动sheet后再设置才可以.这里记录一下.

  10. JS数组的下标如果是字符串的排序

    var test = []; test['0'] = 0; test['1'] = 1; test['2'] = 2; 这样一个数组的排序方式是字符为‘1’的数组元素排第一,为‘0’的排在最后