原文：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. Selenium WebDriver- 操作JavaScript的Alert弹窗

    弹层和弹框是有区别的,弹框是那种完全没样式的框子:弹层是可以直接看到html的,有样式 #encoding=utf-8 import unittest import time from seleniu ...

  2. API生命周期第二阶段——设计：采用swagger进行API描述、设计

    本篇博客主要是以swagger为依托,介绍API生命周期的第二个阶段--设计!在详细介绍之前,我必须声明一点:如果是想了解swagger和项目框架的集成的,这里没有.我要介绍的swagger进行的AP ...

  3. 学习 WebService 第二步：知识准备——SOAP vs REST（wsdl和wadl区别）（转）

    原文地址:蓝精灵——默默争上游 笔记: SOAP和REST是两种实现WebService的主要方案(Web API部署REST貌似占了大半壁江山) REST Web Services 基于 HTTP ...

  4. java面试之String源码中equals具体实现

    废话不多说,直接看代码,注释已经写在上面了: public boolean equals(Object anObject) { if (this == anObject) {//比较两个对象的地址 r ...

  5. jq 的replaceWith方法在360下面会出现兼容问题

    弄的繁琐点, 先remove旧的元素,然后append就好了

  6. cf 472G Design Tutorial: Increase the Constraints 分块+压位/FFT

    题目大意 给出两个\(01\)序列\(A\)和\(B\) 哈明距离定义为两个长度相同的序列中,有多少个对应位置上的数字不一样 "00111" 和 "10101" ...

  7. hdu 4418 高斯消元求期望

    Time travel Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. Foj 2148 二维几何（点是否在三角形内）

    题目大意:给n个坐标(不存在三点共线的点),求能够组成多少个凸四边形. #include<iostream> #include<cstdio> #include<cmat ...

  9. HDU1936 [贪心+KMP] 点的区间覆盖

    每一行对话分别取匹配所有的表情 这样是一个n**2的匹配,可以用KMP 找出每行对话中的每个表情的左右端点 这样相当于就是问用最少多少个点 可以覆盖所有的区间(每个区间中放一个点表示覆盖) 贪心 按右 ...

  10. 2018.8.6 Noip2018模拟测试赛（十九）

    日期: 八月六号  总分: 300分  难度: 提高 ~ 省选    得分: 10分(MMP) 题目目录: T1:Tree T2:异或运算 T3:Tree Restoring 赛后反思: Emmmmm ...