利用Canvas实现360度浏览_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

利用Canvas实现360度浏览_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

前言：最近几个月来到新公司，主要从事移动端方面的开发，有时候也挺忙挺累的，于是就好一段时间没写博客了。其实自己在这几个月里，自己对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/imghwm/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度浏览示例

请使用移动设备或者谷歌浏览器的手机模式打开。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。