& & 在这个群雄乱斗的手机江湖，各品牌打着拍照手机旗号的机型，先不管拍摄效果如何，拥有独家的拍摄功能，可能比说一万遍“我画质好”更容易让人记住。因此，各品牌在推出新机的时候都会不遗余力地增加相机功能的爆点，比如nubia“可以拍星星的手机”、OPPO“全局闪拍”等等，不过这些所谓的独家功能并不真正是独有的，一个APP就可以让人人共享。长曝光记录流光溢彩代表机型：nubia Z7/Z9系列、小米5、小米NOTE、华为Mate7/8& & 摄影爱好者对长曝光一定不会陌生，它可以帮你创作出更有艺术感和故事性的作品，曾经是单反相机的专属，不过最后也成为手机干翻单反的证明方式。最早支持长曝光的就是搭载与nubia Z7系列的nubia相机，另外，华为宣传的光绘2.0也是长曝光的应用。最新的小米5也加入了32秒长曝光功能，足以让你捕捉到原本肉眼不可见的自然星空中的光影变化，城市夜晚车水马龙绚丽光带，创作出令人惊叹的作品。&想拍摄这种照片，除了开启长曝光之外，还需要同时将手机的ISO锁定为50或100，曝光补偿减掉至少一档相似应用LongExpo Pro&& & 很多手机目前还没有长曝光功能，而这款LongExpo应用则可以通过帧叠加的方式获得模拟的长曝光效果。它不仅具备3种慢门模式，可以拍出车流轨迹，Pro版还能进行后期编辑，还同时解决了模拟慢门无法生产高像素文件的问题。多重曝光拍出时空交错代表机型：OPPO N3、nubia Z7/Z9系列& & 摄影就是光的艺术，能否拍出创意，就看你会不会用光，比如多重曝光就是最简单和常见的一种创意用光拍摄方式，它本是胶片时代的产物，通过在同一底片上曝光多次，以此来获得无中生有的奇异感。不过用胶片、单反玩多重曝光是个技术活，而到了手机上，就成了拍照、选滤镜、保存三部曲，怎能不让摄影爱好者“喜大普奔”呢？让我们较早接触到手机多重曝光拍摄方式的应该是OPPO N1、N3以及nubia相机中的Fun模式。目前它在其他手机上的应用还不多，但也不代表我们没办法弥补这种缺憾哟。&多重曝光拍摄很容易带来这样梦幻般的效果，也是其深受广大文青喜爱的重要原因相似应用Fusioncam&&& & 跟那些功能繁多的拍照应用不同，Fusioncam就专注两件事：胶片复古和多重曝光，从里到外都表现出浓浓的复古情调，很符合多重曝光的那种神秘感，也正因如此，它获得很多胶片党的支持。Live Photos让照片动起来代表机型：iPhone 6s/6s Plus、HTC One M8& & 苹果去年发布的iPhone 6s/6s Plus新特性不多，3D Touch和Live Photos也算重头戏，简言之，Live Photos就是允许用户在拍照时额外抓拍下按下快门的那一刻前后数个时间点的照片，用户随后在图库中利用3D Touch特性、按压照片即可查看到一张效果类似于微信小视频的Live Photos。它的趣味性更大于实用性，我们可以把Live Photos理解为视频和照片的结合体。它承载的信息明显比传统的单帧照片丰富得多。不过这个功能并不是苹果的首创，拥有两颗摄像头的HTC One M8也早已支持，不过谁叫人家是苹果呢？相似应用Camera MX&& &&& & Android开发者当然不愿看到苹果独美，这款来自Android平台的Camera MX也很快加入了类似的Shoot The Past功能，能为Android用户带来与Live Photos近乎一致的体验。而且它还提供编辑功能，可以像截取视频一样对起始点、最终帧进行自由修改。&Shoot The Past功能可以帮你拍到溜走的瞬间电子光圈，手机拍照新突破代表机型：nubia Z7/Z9系列、荣耀6 Plus& & 手机由于本身的原因，原本跟可调光圈是无缘的，但通过算法同样可以模拟出各档光圈的效果，从字面上就可以理解，电子光圈并不等同于传统的机械光圈，而是用软件算法来控制照片曝光效果，而这个算法就称为电子光圈。最早提出电子光圈的也是nubia Z7系列，实现了从F2.8~F22之间的范围调整。随后搭载了平行双摄像头的荣耀6 Plus也可以通过景深算法带来让人不敢想象的超大F0.95光圈，实现非常迷人的浅景深效果。不过在追求极致大光圈的时候，也别忽视了小光圈的作用，拍摄范围比较广的风景照用小光圈可以更好地表现细节。&双摄像头手机将越来越多，也让电子光圈的应用有了更多畅想相似应用Big Lens&& & 大多数可模拟调节光圈的应用都只是一个简单的背景虚化功能，而Big Lens提供的是多光圈的选择，从F1.8到F3.5多档可选。它甚至还可以改变背景光源的图案，具有星型、心型、三角等9种图案，让景深效果不再仅仅是模糊这么单调了。机智猫(techmiao)　
　文章为作者独立观点，不代表大不六文章网立场
techmiao让数码给你好看！热门文章最新文章techmiao让数码给你好看！5593人阅读
编程语言（24）
1、什么是canvas
& & &在网页上使用canvas元素时，会创建一块矩形区域，默认矩形区域宽度300px,高度150px。。& & &页面中加入canvas元素后，可以通过javascript自由控制。可以在其中添加图片、线条以及文字，也可以在里头绘图，还可 & & & &以加入高级动画。& & &使用canvas编程，首先要获得其上下文（context）。接着在上下文中执行动作，最后将动作应用到上下文中。
2、canvas坐标
& & &坐标原点为左上角，x轴沿水平方向向右，y轴沿垂直方向向下。
3、替代内容
& & &访问页面时，如果浏览器不支持canvas元素，或者不支持HTML5 Canvas API中的某些特性，开发者最好提供一份替代代码（可以是替代的图片或者说明性的文字）
&&&&&&&&& Update your browser to enjoy canvas!
4、浏览器对HTML5 Canvas API的支持
& & &首先创建一个canvas对象，并获取其上下文。如果发生错误，则捕获错误，进而得知浏览器不支持canvas。页面中预放入ID为support的元素，通过适当的信息更新元素内容，可以反应浏览器支持情况。
&!DOCTYPE HTML&
&title&Canvas API&/title&
&meta charset=&utf-8&&
&p id=&support&&&/p&
&script type=&text/javascript&&
document.createElement(&canvas&).getContext(&2d&);
document.getElementById(&support&).innerHTML =
&HTML5 Canvas is supported in your browser.&
}catch(e){
document.getElementById(&support&).innerHTML =
&HTML5 Canvas is not supported in your browser.&
5、什么是拖拽
&拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在
HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
&!DOCTYPE HTML&
&style type=&text/css&&
height:300
padding:10
border:1px solid #}
&script type=&text/javascript&&
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData(&Text&,ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData(&Text&);
ev.target.appendChild(document.getElementById(data));
&p&请把图片拖拽到矩形中&/p&
&div id=&div1& ondrop=&drop(event)& ondragover=&allowDrop(event)&&&/div&
&img id=&drag1& src=&test.jpg& draggable=&true& ondragstart=&drag(event)& /&
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
&img draggable=&true& /&
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
ev.dataTransfer.setData(&Text&,ev.target.id);
在这个例子中，数据类型是 &Text&，值是可拖动元素的 id (&drag1&)。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData(&Text&);
ev.target.appendChild(document.getElementById(data));
6、Canvas+drag
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&Canvas Learn&/title&
background-color:#
border:solid 1
border-color:
font-family:Geneva,Arial,Helvetica,sans-
text-align:
background-color:#7f3058;
color:#FFFFFF;
font-size:36
text-align:
width:15%;
nav a:link,nav a:visited{
padding:10
font-weight:
border-bottom:3px solid #
text-decoration:
nav a:hover{
background-color:#7f3058;
width:55%;
background-color:#
padding:10
-webkit-border-radius:10
-moz-border-radius:10
border-radius:10
-webkit-box-shadow:2px 2px 20px #
-moz-box-shadow:2px 2px 20px #
box-shadow:2px 2px 20px #
article header{
-webkit-border-radius:10
-moz-border-radius:10
border-radius:10
font-size:18
article div{
height:300
padding:10
border:1px solid #000;
background-color:#7f3058;
text-align:
-webkit-border-radius:5
-moz-border-radius:5
border-radius:5
font-size:18
text-align:
width:25%;
background-color:#
padding:10
-webkit-border-radius:10
-moz-border-radius:10
border-radius:10
-webkit-box-shadow:2px 2px 20px #
-moz-box-shadow:2px 2px 20px #
box-shadow:2px 2px 20px #
aside header{
font-size:15
-webkit-border-radius:10
-moz-border-radius:10
border-radius:10
font-weight:
font-style:
text-align:
&h1&Canvas Learn&/h1&
&div id=&canvas&&
&header&&h3&导 航 栏&/h3&&/header&
&a href=&.cn/html5/tag_canvas.asp&&canvas标签&/a&
&a href=&.cn/html5/html_5_canvas.asp&&canvas学习&/a&
&a href=&http://zh.wikipedia.org/wiki/Canvas_(HTML%E5%85%83%E7%B4%A0)&&canvas维基&/a&
&header&&h3&Canvas图像处理&/h3&&/header&&br /&
&div id=&src&&
&canvas id='image_src' width='420' height='300'
draggable=&true& ondragstart=&drag(event)&&
当前浏览器无法使用canvas标签，请更换新版本浏览器
&p&将图片拖拽到下面方框内&/p&
&div id=&dst& ondrop=&drop(event)& ondragover=&allowDrop(event)&&
&canvas id='image_dst' width='420' height='300'&&/canvas&
&/div&&br /&
&h4&拖拽图片到另一个框内，图像发生反转&/h4&
&/article&
&/section&
&header&&h3&定义和用法&/h3&&/header&
&p&canvas 标签定义图形，比如图表和其他图像。&/p&
&p&canvas 标签只是图形容器，您必须使用脚本来绘制图形。&/p&
&h2&Copyright:Caijinping&/h2&
&script type=&text/javascript&&
var canvasSrc = document.getElementById('image_src');
var contextSrc = canvasSrc.getContext('2d');
image = new Image();
image.src=&test.jpg&;
image.onload=function(){
contextSrc.drawImage(image,0,0);
function draw(){
var canvasDst = document.getElementById('image_dst');
var contextDst = canvasDst.getContext('2d');
var imageDataSrc = contextSrc.getImageData(0,0,image.width,image.height);
var imageDataDst = contextDst.createImageData(image.width, image.height);
for (var j = 0; j & image. j++ )
for (var i = 0; i & image.i++ ){
k = 4*(image.width*j+i);
imageDataDst.data[k + 0] = 255 - imageDataSrc.data[k + 0];
imageDataDst.data[k + 1] = 255 - imageDataSrc.data[k + 1];
imageDataDst.data[k + 2] = 255 - imageDataSrc.data[k + 2];
imageDataDst.data[k + 3] = 255;
contextDst.putImageData(imageDataDst,0,0);
function allowDrop(ev){
ev.preventDefault();
function drag(ev){
ev.dataTransfer.setData(&Text&, ev.target.id);
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData(&Text&);
ev.target.appendChild(document.getElementById(data));
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：129556次
积分：2060
积分：2060
排名：第14425名
原创：76篇
评论：39条
(1)(2)(1)(3)(2)(2)(2)(2)(4)(1)(5)(7)(8)(2)(2)(9)(7)(15)(3)(1)