很多购物网站现在都支持360实物全景图像，可以360度任意选择查看样品，这样对购买者来说是一个很好的消费体验，网上有很多这样的插件都是基于jquery实现的有收费的也有免费的，其实很好用的一个叫3deye.js的插件。该插件支持桌面与移动终端ios与android， 它的demo程序：
自己玩了玩这个demo以后，照着它的思路，用html5 canvas也实现了类似的功能。
所以先说一下它的360度全景图的原理
1. 首先需要对实物拍照，间隔是每张照片旋转15度，所以需要23张照片。
2.照片准备好了以后，尽量选择jpg格式，裁剪到适当大小。
3.javascript中预加载所有照片，可以配合进度条显示加载精度
4.创建/获取canvas对象，加上鼠标监听事件，当鼠标左右移动时候，适度的绘制不同帧。大致的原理就是这样，简单吧！
实现代码：
<!doctype html> <html> <head> <meta chart=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 = fal; 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"; } el { images[i] = new image(); images[i].src = i + ".jpg"; } } ctx = canvas.getcontext("2d"); // mou event canvas.addeventlistener("moudown", domoudown, fal); canvas.addeventlistener('moumove', domoumove, fal); canvas.addeventlistener('mouup', domouup, fal); // loaded(); // frame = 1 frame = 1; images[frame].onload = function() { redraw(); bar.style.display = 'none'; } } function domoudown(event) { var x = event.pagex; var y = event.pagey; var canvas = event.target; var loc = getpointoncanvas(canvas, x, y); console.log("mou down at point( x:" + loc.x + ", y:" + loc.y + ")"); startedx = loc.x; started = true; } function domoumove(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++; } el if(frameindex < 0) { frameindex++; frame--; } el if(frameindex == 0) { break; } if(frame >= 24) { frame = 1; } if(frame <= 0) { frame = 23; } redraw(); } } } function domouup(event) { console.log("mou up now"); if (started) { domoumove(event); startedx = -1; started = fal; } } 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() { ttimeout( 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)小211 frame = 1; ttimeout( 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演示文件下载地址->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-06 10:59:16，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/257cfc1874de00e17db6891ac3132084.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML5 Canvas实现360度全景图的示例代码.doc
本文 PDF 下载地址：HTML5 Canvas实现360度全景图的示例代码.pdf
| 留言与评论（共有 0 条评论） |
