HTML canvas 根据一组图片生成360° 左右滑动旋转效果
2021-05-30 09:00
标签:clientx type https doctype canvas amp www over eww 参考链接 https://www.cnblogs.com/chengguanhui/p/5155440.html,在此基础上稍微修改了下,加了鼠标滚轮放大缩小的功能 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.htmlDOCTYPE 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>
上一篇:springboot、入门
文章标题:HTML canvas 根据一组图片生成360° 左右滑动旋转效果
文章链接:http://soscw.com/essay/89484.html