HTML canvas 根据一组图片生成360° 左右滑动旋转效果

2021-05-30 09:00

阅读:670

标签:clientx   type   https   doctype   canvas   amp   www   over   eww   

参考链接 https://www.cnblogs.com/chengguanhui/p/5155440.html,在此基础上稍微修改了下,加了鼠标滚轮放大缩小的功能

HTML代码

DOCTYPE html>
html>
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    title>360度旋转浏览title>
    style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .loading {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: #888888;
            z-index: 10;
        }

            .loading img {
                position: relative;
                width: 32px;
                height: 32px;
                left: 50%;
                top: 50%;
                margin-left: -16px;
                margin-top: -16px;
            }

        canvas {
            width: 100%;
            height: 100%;
            z-index: 100;
        }
    style>
head>
body>
    div class="loading">
        img src="img/loading.gif" />
    div>
canvas id="canvas" width="750" height="750">canvas>
script src="https://cdnjs.gtimg.com/cdnjs/libs/zepto/1.1.4/zepto.min.js">script>
script>
    function formatZero(num, len) {
        if(String(num).length > len) return num;
        return (Array(len).join(0) + num).slice(-len);
    }
    var canvas = document.getElementById("canvas"),
        DPR = window.devicePixelRatio,//获取设备的物理像素比
        viewW = window.innerWidth,
        viewH = window.innerHeight,
        cansW = viewW * DPR,//放大canvas
        cansH = viewH * DPR,
        ctx = canvas.getContext("2d"),
        imgArr = [],//图片数组
        curDeg = 0,//代表当前显示的图片下标
        imgTotal = 36,//图片总数
        imgRatio = (447 / 447), //图片高宽比
        imgW = viewW * 1.5,//图宽
        imgH = imgW * imgRatio;//图高
        imgScale = 1;
    //重设canvas宽高
    //显示的宽高
    canvas.style.width = cansW + "px";
    canvas.style.height = cansH + "px";
    //画布宽高
    canvas.width = cansW;
    canvas.height = cansH;
    //loading
    window.onload = function() {
        {
            var baseURL = "img/",
                imgURL = "",
                imgObj = null,
                imgIndex = 1;
            //loading
            for (var i = 0; i  imgTotal; i++) {
                imgURL = baseURL + "00_" + formatZero(i, 2) + ".jpg";
                imgObj = new Image();
                imgObj.src = imgURL;
                //将所有图片对象压入一个数组,方便调用
                imgArr.push(imgObj);
                imgObj.onload = function () {
                    imgIndex++;
                    if (imgIndex > 35) {
                        $(".loading").hide();
                        //默认图
                        drawImg(0);
                    }
                }
            }
            //手指触摸起点
            var startPoint = 0,
                //滑动多长距离,这里取(canvas宽/图片总数的一半)
                //数值越大约灵敏
                distance = cansW / 50;
            //开始
            var canvas = document.querySelector(canvas);
            canvas.addEventListener(touchstart,
                function (e) {
                    startPoint = e.touches[0].clientX;
                    //去掉默认事件,iPhone下可去除双击页面默认跳动(翻页)效果
                    e.preventDefault();
                },
                false);
            canvas.addEventListener(touchmove,
                function (e) {
                    var tempPoint = e.touches[0].clientX;
                    //向右移动
                    if ((tempPoint - startPoint) > distance) {
                        drawImg(curDeg, "right");
                        //符合距离条件移动后,将记录点设到手指最新位置
                        startPoint = tempPoint;
                    } else if ((tempPoint - startPoint)  -distance) {//
                        drawImg(curDeg, "left");
                        startPoint = tempPoint;
                    }
                    //禁止移动页面
                    e.preventDefault();
                },
                false);
            canvas.onmousewheel = canvas.onwheel = function (event) {    //滚轮放大缩小

                event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
                if (event.wheelDelta > 0) {
                    imgScale *= 2;
                } else {
                    imgScale /= 2;
                }
                drawImg(curDeg);   //重新绘制图片
            };
        }
    }
    //绘图
    //参数:图片对象下标,移动方向
    function drawImg(n, type) {
        if (type == "left") {
            if (curDeg > 0) {
                curDeg--;
            } else {
                curDeg = 35;
            }
        } else if (type == "right") {
            if (curDeg  35) {
                curDeg++;
            } else {
                curDeg = 0;
            }
        }
        ctx.clearRect(0, 0, cansW, cansH);
        //参数:图片对象,X偏移量,Y偏移量,图宽,图高
        ctx.drawImage(imgArr[n], -(imgW * imgScale - viewW) * 0.5, (viewH - imgH * imgScale) * 0.5, imgW * imgScale, imgH * imgScale);
    }
script>
body>
html>

 源码下载:   https://files.cnblogs.com/files/lkd3063601/360.rar

HTML canvas 根据一组图片生成360° 左右滑动旋转效果

标签:clientx   type   https   doctype   canvas   amp   www   over   eww   

原文地址:https://www.cnblogs.com/lkd3063601/p/14684476.html


评论


亲,登录后才可以留言!