前言：最近几个月来到新公司，主要从事移动端方面的开发，有时候也挺忙挺累的，于是就好一段时间没写博客了。其实自己在这几个月里，自己对canvas以及createjs和egret都有了一定程度上的认识与掌握了，所以有挺多东西想总结一下的。趁着今天广州下雪的日子，就写点东西吧，先从简单的demo开始吧。因为自己在走HTML5游戏方向，所以最近都在做小游戏。后续会再写关于canvas和createjs的系列文章吧，毕竟国内的资料比较少。一旦爱上了canvas，我便逐渐嫌弃DOM了。
360度浏览效果
利用最简单的多张图片，让产品实现360旋转浏览效果。以往用DOM来实现图片或者背景更换，是挺方便也容易，但是在移动端上面尤其安卓系统，流畅度真让人堪忧。而且现在移动端基本上都支持canvas上下文2d，所以能用canvas实现的尽量避免使用DOM。当然，如果是数量或简单少的动画，还是用CSS3比较好。交互操作类的当下则非canvas莫属。
准备工作:
首先是素材问题，围绕商品的四周各拍几张图片，然后让设计师重新修一下图，最终分解成多张图片素材。多则三四十张，小则十几张，视情况而定。要说明的是，我这里用的只是替换图片的方法实现仿3D旋转，日后我会再写一个仅需几张图片的3D全景浏览效果。
如图所示（是不是很多，哈哈，简单的方法实现肯定要牺牲点什么的，下次再写另外的方法吧）：
HTML+CSS：
<!DOCTYPE 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="1254">你的浏览器太老啦，换浏览器啦！</canvas>
<script src="js/zepto.min.js"></script>
</body>
</html>
JavaScript:
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 = 1,//代表当前显示的图片下标
imgTotal = 51,//图片总数
imgRatio = (447/1000), //图片高宽比
imgW = viewW*1.5,//图宽
imgH = imgW*imgRatio;//图高
//重设canvas宽高
//显示的宽高
canvas.style.width = cansW + "px";
canvas.style.height = cansH + "px";
//画布宽高
canvas.width = cansW;
canvas.height = cansH;
//loading
$(function(){
var baseURL = "img/",
imgURL ="",
imgObj = null,
imgIndex = 1;
//loading
for(var i = 1;i <= imgTotal;i++){
imgURL = baseURL + i + ".png";
imgObj = new Image();
imgObj.src = imgURL;
//将所有图片对象压入一个数组,方便调用
imgArr.push(imgObj);
imgObj.onload = function(){
imgIndex ++;
if(imgIndex > 51){
$(".loading").hide();
//默认图
drawImg(0);
}
}
}
//手指触摸起点
var startPoint = 0,
//滑动多长距离，这里取（canvas宽/图片总数的一半）
//数值越大约灵敏
distance = cansW/30;
//开始
$("#canvas").on({
"touchstart":function(e){
//记录起始触摸点
startPoint = e.touches[0].clientX;
//去掉默认事件，iPhone下可去除双击页面默认跳动(翻页)效果
e.preventDefault();
},
"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();
}
});
});
//绘图
//参数：图片对象下标，移动方向
function drawImg(n,type){
if(type == "left"){
if(curDeg > 0){
curDeg--;
}else{
curDeg = 50;
}
}else if(type == "right"){
if(curDeg < 50){
curDeg++;
}else{
curDeg = 0;
}
}
ctx.clearRect(0,0,cansW,cansH);
//参数：图片对象，X偏移量，Y偏移量，图宽，图高
ctx.drawImage(imgArr[n],-(imgW-viewW)*0.5,(viewH-imgH)*0.5,imgW,imgH);
}
代码说明：
对于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地址：
请使用移动设备或者谷歌浏览器的手机模式打开。