扣丁学堂HTML5培训简述HTML5 Canvas实现360度全景图的示例

2019-09-16 11:11:01 3452浏览

很多购物网站现在都支持360实物全景图像，可以360度任意选择查看样品，这样对购买者来说是一个很好的消费体验，网上有很多这样的插件都是基于jQuery实现的有收费的也有免费的。本篇文章扣丁学堂HTML5培训小编给小伙伴们分享一下HTML5 Canvas如何实现360度全景图，感兴趣的小伙伴就来了解一下吧。

先说一下它的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>

想了解更多内容的小伙伴可以登录扣丁学堂官网咨询。想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习，此外还有与时俱进的HTML5课程体系和HTML5视频教程供大家学习，想要学好HTML5开发技术的小伙伴快快行动吧。扣丁学堂H5技术交流群：673883249。

【扫码进入HTML5VIP免费公开课】

【关注微信公众号获取更多学习资料】【扫码进入HTML5前端开发VIP免费公开课】

查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 HTML5培训班

上一篇扣丁学堂Web培训简述Web前端开发工具有哪些下一篇千锋扣丁学堂HTML5培训之CSS美化单选框\多选框\开关按钮

扣丁学堂HTML5培训简述HTML5 Canvas实现360度全景图的示例

热门专区

课程推荐