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

  360度浏览示例

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

利用Canvas实现360度浏览的更多相关文章

  1. HTML5 Canvas实现360度全景图

    原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...

  2. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  3. 安卓端360度全景图的html5实现

    这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光. 此处引入了ddpanorama插件,它的原理是在canvas上绘制全景 ...

  4. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  5. html5人物图片360度立体旋转

    体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...

  6. 利用canvas实现的中点Bresenham算法

    Bresenham提出的直线生成算法的基本原理是,每次在最大位移方向上走一步,而另一个方向是走步还是不走步取决于误差项的判别,具体的实现过程大家可以去问度娘.我主要是利用canvas画布技术实现了这个 ...

  7. 使用Sitecore的可视化路径分析器工具洞察客户360度行为

    Path Analyzer背后的想法是观察,分析和理解您的潜在客户和客户在浏览您的网站时所遵循的网络旅程.他们最初来自哪里?他们的路径是“有机”(通过搜索引擎)还是来自付费广告?社交帖子?甚至是你发起 ...

  8. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  9. 180度\360度sg90舵机的使用及代码程序

    大部资料都是在网上找到网友大神所共享的,在网上找了几种舵机的,刚接触有点懵,之后找得多了就理解了,想要控制一个硬件就要先了解这个硬件.这里有介绍180度舵机和360度舵机的具体使用,有网上大神的程序, ...

随机推荐

  1. 邻接矩阵有向图(一)之 C语言详解

    本章介绍邻接矩阵有向图.在"图的理论基础"中已经对图进行了理论介绍,这里就不再对图的概念进行重复说明了.和以往一样,本文会先给出C语言的实现:后续再分别给出C++和Java版本的实 ...

  2. emacs: 文本输入中文件目录自动补全

    emacs: 文本输入中文件目录自动补全 // */ // ]]> UP | HOME   emacs: 文本输入中文件目录自动补全 Table of Contents 1 引言 2 补全过程演 ...

  3. Windows Azure Web Site (13) Azure Web Site备份

    <Windows Azure Platform 系列文章目录> 我们在使用Windows Azure Web Site的时候,经常会遇到需要对Web Site进行备份的情况.在这里笔者简单 ...

  4. 大数据下的Distinct Count(一):序

    在数据库中,常常会有Distinct Count的操作,比如,查看每一选修课程的人数: select course, count(distinct sid) from stu_table group ...

  5. Android开发中遇到的requestFeature() must be called before adding content异常

    缘起 上一篇博文中讲到了几种实现全屏显示Activity内容的方法.然而实际在实现中发现了一些问题,在本篇博文中进行总结下.首先交代一下开发环境,本人使用的是Android Studio 1.5.1, ...

  6. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

  7. Winform如何实现ComboBox模糊查询

    最近朋友问了一个关于Winform实现ComboBox模糊查询的知识点,自己好久没有搞Winform了,就上手练了一下,废话不多说,进入正题. 前台设计: 前台就是一个简单的Form窗体+一个Comb ...

  8. Entity Framework 实体框架的形成之旅--Code First模式中使用 Fluent API 配置(6)

    在前面的随笔<Entity Framework 实体框架的形成之旅--Code First的框架设计(5)>里介绍了基于Code First模式的实体框架的经验,这种方式自动处理出来的模式 ...

  9. 前端代码标准最佳实践:CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

  10. 再一个客户端设置多个git账号

    步骤一:用ssh-keygen命令生成一组新的id_rsa_new和id_rsa_new.pub. ssh-keygen -t rsa -C "new email" 平时我们都是直 ...