html5 360度图像查看,HTML5 Canvas实现360度全景图

varctx= null;//global variable 2d context

varframe= 1;//23

varwidth= 0;varheight= 0;varstarted= false;varimages= newArray();varstartedX= -1;

window.οnlοad= 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");//mouse event

canvas.addEventListener("mousedown", doMouseDown,false);

canvas.addEventListener('mousemove', doMouseMove,false);

canvas.addEventListener('mouseup', doMouseUp,false);//loaded();

//frame = 1

frame= 1;

images[frame].οnlοad= function() {

redraw();

bar.style.display= 'none';

}

}functiondoMouseDown(event) {varx=event.pageX;vary=event.pageY;varcanvas=event.target;varloc=getPointOnCanvas(canvas, x, y);

console.log("mouse down at point( 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++;

}else if(frameIndex< 0)

{

frameIndex++;

frame--;

}else if(frameIndex== 0)

{break;

}if(frame>= 24)

{

frame= 1;

}if(frame<= 0)

{

frame= 23;

}

redraw();

}

}

}functiondoMouseUp(event) {

console.log("mouse up now");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()

{//var imageObj = document.createElement("img");

//var imageObj = new Image();

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);

}

Auto Play