前言：最近几个月来到新公司，主要从事移动端方面的开发，有时候也挺忙挺累的，于是就好一段时间没写博客了。其实自己在这几个月里，自己对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 41 42 43 44 45
46 你的浏览器太老啦，换浏览器啦！47 48 49
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 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) 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度浏览示例
请使用移动设备或者谷歌浏览器的手机模式打开。