利用Canvas实现360度浏览 - 推酷
利用Canvas实现360度浏览
前言：最近几个月来到新公司，主要从事移动端方面的开发，有时候也挺忙挺累的，于是就好一段时间没写博客了。其实自己在这几个月里，自己对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&
&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%;
width: 100%;
height: 100%;
background-color: #888888;
z-index: 10;
.loading img{
height: 32
left: 50%;
margin-left: -16
margin-top: -16
width: 100%;
height: 100%;
z-index: 100;
&div class=&loading&&
&img src=&img/loading.gif&/&
&canvas id=&canvas& width=&750& height=&1254&&你的浏览器太老啦，换浏览器啦！&/canvas&
&script src=&js/zepto.min.js&&&/script&
49 &/html&
JavaScript:
1 var canvas = document.getElementById(&canvas&),
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*imgR//图高
//重设canvas宽高
//显示的宽高
canvas.style.width = cansW + &px&;
canvas.style.height = cansH + &px&;
//画布宽高
canvas.width = cansW;
canvas.height = cansH;
$(function(){
var baseURL = &img/&,
imgURL =&&,
imgObj = null,
imgIndex = 1;
for(var i = 1;i &= imgTi++){
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 = tempP
}else if((tempPoint - startPoint) & -distance){//左
drawImg(curDeg,&left&);
startPoint = tempP
//禁止移动页面
e.preventDefault();
//参数：图片对象下标，移动方向
function drawImg(n,type){
if(type == &left&){
if(curDeg & 0){
curDeg = 50;
}else if(type == &right&){
if(curDeg & 50){
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的参考文章：
所以为了解决模糊问题，我们需要根据DPR对画布宽高进行调整，让画布大小等于物理像素大小。也就是把canvas的宽高变成对应的物理像素大小，然后把真正需要显示的区域画在屏幕位置，其余的隐藏掉。如图所示：
另外，DPR通过window.devicePixelRatio即可获取，基于webkit的浏览器都支持，IE不支持。
再者，这里的滑动我使用了原生方法touchstart和touchmove触摸事件，通过记录手指起点以及终点的X轴坐标大小判断左右滑动。如果加入了zepto的TOUCH组件，则可以直接使用swipeLeft和swipeRight触发（拖动使用drag），从而改变相应的图片。
关于绘图：
使用drawImage()方法绘图，还要注意的是，一定要待图片完全加载后才能进行绘图，否则会报错。
DEMO地址：
请使用移动设备或者谷歌浏览器的手机模式打开。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致html5（9）
在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面，甚至好多学习HTML5的开发者都是冲着Web端的页游去的，那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的？本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器：Canvas绘制API。
Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。
(1)&要使用Canvas来绘制图形必须在页面中添加Canvas的标签。
例如：&&canvas
id=&demoCanvas& width=&500& height=&500&& &p&爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？&/p& &/canvas&
(2)&当然只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象.
&script type=&text/javascript&&
//第一步：获取canvas元素
var canvasDom = document.getElementById(&demoCanvas&);
//第二步：获取上下文
var context = canvasDom.getContext('2d');
(3)&Context上下文默认两种绘制方式：第一种：绘制线（stroke），第二种：填充：fill。
注意：决定了使用哪种方式之后，在填充或者绘制线之前先设置样式。
Canvas绘制的总体的步骤
创建HTML页面，设置画布标签编写js，获取画布dom对象通过Canvas标签的Dom对象获取上下文设置绘制线样式、颜色绘制矩形，或者填充矩形
Canvas绘制一个矩形和填充一个矩形的Demo
&&&&&canvas&id=&demoCanvas&
width=&500& height=&500&&
&&&&&&&&&p&爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？&/p&
&&&&&/canvas&
&&&&&script&type=&text/javascript&&
&&&&&&&&//第一步：获取canvas元素
&&&&&&&&var
canvasDom = document.getElementById(&demoCanvas&);
&&&&&&&&//第二步：获取上下文
&&&&&&&&var
context = canvasDom.getContext('2d');
&&&&&&&&//第三步：指定绘制线样式、颜色
&&&&&&&&context.strokeStyle
&&&&&&&&//第四步：绘制矩形，只有线。内容是空的
&&&&&&&&context.strokeRect(10,
10, 190, 100);
&&&&&&&&//以下演示填充矩形。
&&&&&&&&context.fillStyle
&&&&&&&&context.fillRect(110,110,100,100);
&&&&&/script&
最终效果下图：
还不赶快动手试一下？
未完待续，期待下一节吧？
文章永久地址1：
永久地址2：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：94720次
积分：1961
积分：1961
排名：第16259名
原创：63篇
转载：239篇
(1)(1)(1)(11)(5)(1)(9)(11)(14)(16)(70)(3)(6)(8)(10)(1)(13)(6)(11)(43)(7)(15)(5)(8)(3)(2)(6)(2)(18)匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。