利用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   2   3       4           5           6          360度旋转浏览  7           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          41      42      43         
44              45

      
查看更多关于利用Canvas实现360度浏览_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110731