利用Canvas实现360度浏览_html/css_WEB-ITnose
前言：最近几个月来到新公司，主要从事移动端方面的开发，有时候也挺忙挺累的，于是就好一段时间没写博客了。其实自己在这几个月里，自己对canvas以及createjs和egret都有了一定程度上的认识与掌握了，所以有挺多东西想总结一下的。趁着今天广州下雪的日子，就写点东西吧，先从简单的demo开始吧。因为自己在走HTML5游戏方向，所以最近都在做小游戏。后续会再写关于canvas和createjs的系列文章吧，毕竟国内的资料比较少。一旦爱上了canvas，我便逐渐嫌弃DOM了。
360度浏览效果
利用最简单的多张图片，让产品实现360旋转浏览效果。以往用DOM来实现图片或者背景更换，是挺方便也容易，但是在移动端上面尤其安卓系统，流畅度真让人堪忧。而且现在移动端基本上都支持canvas上下文2d，所以能用canvas实现的尽量避免使用DOM。当然，如果是数量或简单少的动画，还是用CSS3比较好。交互操作类的当下则非canvas莫属。
准备工作:
首先是素材问题，围绕商品的四周各拍几张图片，然后让设计师重新修一下图，最终分解成多张图片素材。多则三四十张，小则十几张，视情况而定。要说明的是，我这里用的只是替换图片的方法实现仿3D旋转，日后我会再写一个仅需几张图片的3D全景浏览效果。
如图所示（是不是很多，哈哈，简单的方法实现肯定要牺牲点什么的，下次再写另外的方法吧）：
HTML+CSS：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> 6 <title>360度旋转浏览</title> 7 <style type="text/css"> 8 *{ 9 margin: 0;10 padding: 0;11 }12 body,html{13 width: 100%;14 height: 100%;15 overflow: hidden;16 }17 .loading{18 position: absolute;19 width: 100%;20 height: 100%;21 left: 0;22 top: 0;23 background-color: #888888;24 z-index: 10;25 }26 .loading img{27 position: relative;28 width: 32px;29 height: 32px;30 left: 50%;31 top: 50%;32 margin-left: -16px;33 margin-top: -16px;34 }35 canvas{36 width: 100%;37 height: 100%;38 z-index: 100;39 }40 </style>41 </head>42 <body>43 <div class="loading">44 <img src="/static/imghw/default1.png" data-src="img/loading.gif" class="lazy"/ alt="利用Canvas实现360度浏览_html/css_WEB-ITnose" >45 </div>46 <canvas id="canvas" width="750" style="max-width:90%">你的浏览器太老啦，换浏览器啦！</canvas>47 <script src="js/zepto.min.js"></script>48 </body>49 </html>JavaScript:
1 var canvas = document.getElementById("canvas"), 2 DPR = window.devicePixelRatio,//获取设备的物理像素比 3 viewW = window.innerWidth, 4 viewH = window.innerHeight, 5 cansW = viewW*DPR,//放大canvas 6 cansH = viewH*DPR, 7 ctx = canvas.getContext("2d"), 8 imgArr = [],//图片数组 9 curDeg = 1,//代表当前显示的图片下标10 imgTotal = 51,//图片总数11 imgRatio = (447/1000), //图片高宽比12 imgW = viewW*1.5,//图宽13 imgH = imgW*imgRatio;//图高14 15 //重设canvas宽高16 //显示的宽高17 canvas.style.width = cansW + "px";18 canvas.style.height = cansH + "px";19 //画布宽高20 canvas.width = cansW;21 canvas.height = cansH;22 //loading23 $(function(){24 var baseURL = "img/",25 imgURL ="",26 imgObj = null,27 imgIndex = 1;28 //loading29 for(var i = 1;i <= imgTotal;i++){30 imgURL = baseURL + i + ".png";31 imgObj = new Image();32 imgObj.src = imgURL;33 //将所有图片对象压入一个数组,方便调用34 imgArr.push(imgObj);35 imgObj.onload = function(){36 imgIndex ++;37 if(imgIndex > 51){38 $(".loading").hide();39 //默认图40 drawImg(0);41 }42 }43 }44 //手指触摸起点45 var startPoint = 0,46 //滑动多长距离，这里取（canvas宽/图片总数的一半）47 //数值越大约灵敏48 distance = cansW/30;49 //开始50 $("#canvas").on({51 "touchstart":function(e){52 //记录起始触摸点53 startPoint = e.touches[0].clientX;54 //去掉默认事件，iPhone下可去除双击页面默认跳动(翻页)效果55 e.preventDefault();56 },57 "touchmove":function(e){58 var tempPoint = e.touches[0].clientX;59 //向右移动60 if((tempPoint - startPoint) > distance){61 drawImg(curDeg,"right");62 //符合距离条件移动后，将记录点设到手指最新位置63 startPoint = tempPoint;64 }else if((tempPoint - startPoint) < -distance){//左65 drawImg(curDeg,"left");66 startPoint = tempPoint;67 }68 //禁止移动页面69 e.preventDefault();70 }71 });72 });73 //绘图74 //参数：图片对象下标，移动方向75 function drawImg(n,type){76 if(type == "left"){77 if(curDeg > 0){78 curDeg--;79 }else{80 curDeg = 50;81 } 82 }else if(type == "right"){83 if(curDeg < 50){84 curDeg++;85 }else{86 curDeg = 0;87 }88 }89 ctx.clearRect(0,0,cansW,cansH); 90 //参数：图片对象，X偏移量，Y偏移量，图宽，图高91 ctx.drawImage(imgArr[n],-(imgW-viewW)*0.5,(viewH-imgH)*0.5,imgW,imgH);92 }代码说明：
对于canvas，我还想说明的是，在移动端使用canvas画布，一定要记得处理DPR，DPR全称是 DevicePixelRatio （设备像素比）。意思是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。也就是一个设备独立像素（可以理解为CSS中的1px）相当于多少个物理像素。假如DPR=2，那么CSS中的1px就相当于设备物理像素的2px。但是在Canvas绘图中，画布大小跟可视区域大小是不一样的。可视区域大小会根据DPR大小进行调整，但是画布大小并不会。例如DPR=2，我在retina屏中设置canvas的可视宽高等于画布宽高，那么画布里的1px会在retina屏上以2px展示，所以会导致模糊现象。
关于DPR和view的参考文章： 移动前端开发之viewport的深入理解
所以为了解决模糊问题，我们需要根据DPR对画布宽高进行调整，让画布大小等于物理像素大小。也就是把canvas的宽高变成对应的物理像素大小，然后把真正需要显示的区域画在屏幕位置，其余的隐藏掉。如图所示：
另外，DPR通过window.devicePixelRatio即可获取，基于webkit的浏览器都支持，IE不支持。
再者，这里的滑动我使用了原生方法touchstart和touchmove触摸事件，通过记录手指起点以及终点的X轴坐标大小判断左右滑动。如果加入了zepto的TOUCH组件，则可以直接使用swipeLeft和swipeRight触发（拖动使用drag），从而改变相应的图片。
关于绘图：
使用drawImage()方法绘图，还要注意的是，一定要待图片完全加载后才能进行绘图，否则会报错。
DEMO地址：
360度浏览示例
请使用移动设备或者谷歌浏览器的手机模式打开。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7698
15
1640
14
1393
52
1287
25
1229
29
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까?
Apr 04, 2025 pm 11:30 PM
웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...
Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?
Apr 04, 2025 pm 11:54 PM
GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구
Apr 09, 2025 am 12:12 AM
HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까?
Apr 05, 2025 am 06:15 AM
이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...
