HTML5 Canvas实现360度全景图的示例代码
程序员文章站
2022-06-21 09:53:49
本篇文章主要介绍了HTML5 Canvas实现360度全景图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-01-29...
很多购物网站现在都支持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 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演示文件下载地址->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 详解HTML5 data-* 自定义属性
下一篇： Python实现一个简单的验证码程序