网站建设资讯

NEWS

网站建设资讯

HTML5Canvas实现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对象,加上鼠标监听事件,当鼠标左右移动时候,适度的绘制不

同帧。大致的原理就是这样,简单吧!

实现代码:

        Full 360 degree View         

Demo演示文件下载地址->http://download.csdn.net/detail/jia20003/6670901



本文名称:HTML5Canvas实现360度全景图
文章地址:http://cdweb.net/article/jsdchc.html