HTML5 Canvas实现360度全景图-优快云博客

本文介绍了一种使用HTML5 Canvas实现360度实物全景图像的方法，通过拍摄一系列间隔15度的照片并利用JavaScript进行加载和展示，提供了一个交互式的购物体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多购物网站现在都支持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对象，加上鼠标监听事件，当鼠标左右移动时候，适度的绘制不

同帧。大致的原理就是这样，简单吧！

实现代码：

[html]view plaincopy
<!DOCTYPEhtml>
<html>
<head>
<metacharset=utf-8">
<title>Full360degreeView</title>
<script>
varctx=null;//globalvariable2dcontext
varframe=1;//23
varwidth=0;
varheight=0;
varstarted=false;
varimages=newArray();
varstartedX=-1;
window.onload=function(){
varcanvas=document.getElementById("fullview_canvas");
canvas.width=440;//window.innerWidth;
canvas.height=691;//window.innerHeight;
width=canvas.width;
height=canvas.height;
varbar=document.getElementById('loadProgressBar');
for(vari=1;i<24;i++)
{
bar.value=i;
if(i<10)
{
images[i]=newImage();
images[i].src="0"+i+".jpg";
}
else
{
images[i]=newImage();
images[i].src=i+".jpg";
}
}
ctx=canvas.getContext("2d");
//mouseevent
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';
}
}
functiondoMouseDown(event){
varx=event.pageX;
vary=event.pageY;
varcanvas=event.target;
varloc=getPointOnCanvas(canvas,x,y);
console.log("mousedownatpoint(x:"+loc.x+",y:"+loc.y+")");
startedX=loc.x;
started=true;
}
functiondoMouseMove(event){
varx=event.pageX;
vary=event.pageY;
varcanvas=event.target;
varloc=getPointOnCanvas(canvas,x,y);
if(started){
varcount=Math.floor(Math.abs((startedX-loc.x)/30));
varframeIndex=Math.floor((startedX-loc.x)/30);
while(count>0)
{
console.log("frameIndex="+frameIndex);
count--;
if(frameIndex>0)
{
frameIndex--;
frame++;
}elseif(frameIndex<0)
{
frameIndex++;
frame--;
}
elseif(frameIndex==0)
{
break;
}
if(frame>=24)
{
frame=1;
}
if(frame<=0)
{
frame=23;
}
redraw();
}
}
}
functiondoMouseUp(event){
console.log("mouseupnow");
if(started){
doMouseMove(event);
startedX=-1;
started=false;
}
}
functiongetPointOnCanvas(canvas,x,y){
varbbox=canvas.getBoundingClientRect();
return{x:x-bbox.left*(canvas.width/bbox.width),
y:y-bbox.top*(canvas.height/bbox.height)
};
}
functionloaded(){
setTimeout(update,1000/8);
}
functionredraw()
{
//varimageObj=document.createElement("img");
//varimageObj=newImage();
varimageObj=images[frame];
ctx.clearRect(0,0,width,height)
ctx.drawImage(imageObj,0,0,width,height);
}
functionupdate(){
redraw();
frame++;
if(frame>=23)frame=1;
setTimeout(update,1000/8);
}
</script>
</head>
<body>
<progressid="loadProgressBar"value="0"max="23"></progress>
<canvasid="fullview_canvas"></canvas>
<buttononclick="loaded()">AutoPlay</button>
</body>
</html>