IT瘾html5推荐

html5选择摄像头 android - Enable rear camera with HTML5 - Stack Overflow

Sun, 03 Mar 2019 11:20:50 CST

Check out https://simpl.info/getusermedia/sources/ that shows how you can select sources using

   MediaStreamTrack.getSources(gotSources);

You can then select the source and pass it in as optional into getUserMedia

   var constraints = {
  audio: {
    optional: [{sourceId: audioSource}]
  },
  video: {
    optional: [{sourceId: videoSource}]
  }
};
navigator.getUserMedia(constraints, successCallback, errorCallback);

It is now fully available in Stable Chrome and mobile (As of v30)

详见源码：

https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js

html：

<div id="container">

	<h1><a href=" ../../index.html" title="simpl.info home page">simpl.info</a> MediaStreamTrack.getSources</h1>

	<div class="select">
	<label for="audioSource">Audio source: </label><select id="audioSource"></select>
	</div>

	<div class="select">
	<label for="videoSource">Video source: </label><select id="videoSource"></select>
	</div>

	<video muted autoplay></video>

	<script src=" js/main.js"></script>

	<p>This demo requires Chrome 30 or later.</p>

	<p>For more information, see <a href=" https://www.html5rocks.com/en/tutorials/getusermedia/intro/" title="Media capture article by Eric Bidelman on HTML5 Rocks">Capturing Audio & Video in HTML5</a> on HTML5 Rocks.</p>

	<a href=" https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

	</div>

Last time i developped that code, soo here is the version which i use : you call directly the function whichCamera in your code and you specefic which camera "user","environment" or "computer"'if you are runing in a computer)

      `//----------------------------------------------------------------------
//  whichCamera(Type)
//    For smartphone or tablet :
//     Start the type={user,environment} camera.
//    For computer it's simple :
//      type = "computer".
//----------------------------------------------------------------------
var streamSrc, cameraType;
function whichCamera(type){

  var cameraFacing;
  cameraType = type;
  if( type == "user")
    cameraFacing = 0;
  else if( type == "environment")
    cameraFacing = 1;
  else if( type == "computer"){
    cameraFacing = 2;
  }
  console.log(type+" index : "+cameraFacing);

  //  Here we list all media devices, in order to choose between
  //  the front and the rear camera.
  //      videoDevices[0] : user Camera
  //      videoDevices[1] : environment Camera
  //  Then set the video resolution.
  navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    var videoDevices, videoDeviceIndex, constraints;
    //  Initialize the array wich will contain all video resources IDs.
    //  Most of devices have two video resources (Front & Rear Camera).
    videoDevices = [0,0];
    //  Simple index to browse the videa resources array (videoDevices).
    videoDeviceIndex = 0;
    //  devices.forEach(), this function will detect all media resources (Audio, Video) of the device
    //  where we run the application.
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
      // If the kind of the media resource is video,
      if (device.kind == "videoinput") {
        //  then we save it on the array videoDevices.
        videoDevices[videoDeviceIndex++] =  device.deviceId;
        console.log(device.deviceId+" = "+videoDevices[videoDeviceIndex-1]);
      }
    });
    console.log("Camera facing ="+cameraFacing+" ID = "+videoDevices[videoDeviceIndex-1]);

    // Here we specified which camera we start,
    //  videoDevices[0] : Front Camera
    //  videoDevices[1] : Back Camera
    if( cameraFacing != "computer"){
      constraints = { deviceId: { exact: videoDevices[cameraFacing]  }};
      return navigator.mediaDevices.getUserMedia({ video:
                                                          constraints,
                                                          width: { min: 1280, ideal: 1600, max: 1920 },
                                                          height: { min: 720, ideal: 1200, max: 1080 }
                                                  }
                                                );
    }else
      return navigator.mediaDevices.getUserMedia({ video: true });
    })
    //  Then we retrieve the link to the video stream.
    .then(stream => {
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
        localMediaStream = stream;
        console.log(localMediaStream +" = "+ stream)
      } else if (video.mozSrcObject !== undefined) {
        video.mozSrcObject = stream;
        console.log(video.mozSrcObject +" = "+ stream)
      } else if (video.srcObject !== undefined) {
        video.srcObject = stream;
        console.log(video.srcObject +" = "+ stream)
      } else {
        video.src = stream;
        console.log(video.src +" = "+ stream)
      }
      streamSrc = stream;
    })
    .catch(e => console.error(e));

}

有支持M3U8格式的HTML5播放器吗？ - 知乎

Fri, 20 Jul 2018 15:55:03 CST

最近接触了这一块，简单说下吧。

m3u8 是一种基于 HTTP Live Streaming文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。目前由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持，你可以直接通过

        video.src = 'xxx.m3u8'

来实现。

如果你希望兼容所有的浏览器的话, 你需要知道 Chrome 和 Firefox 支持的 Media Source Extensions（非常不理想，在IE和国内具备兼容模式的极速浏览器下）的情况：

" width="1224">

目前 Youtube 和 Netflix 等主流视频网站，即使 FB 的 newsfeed 里面的视频也采用了 HLS 的解决方案，大致实现流程如下：

" width="1370">

其核心，在于对于 m3u8 的文件解析和通过 XHR 去完成对分片内容二进制文件的获取，然后使用 MSE 的 appendBuffer 去进行 buffer 的封装，然后自己完成合流的工作。

目前国内的，bilibili 最早实现了基于 MSE 解决方案的播放器，大概为什么他们必须用 MSE 而不是优酷和腾讯的多 video 方案，可能是钱少，视频转MP4需要大量服务器，当然 MSE 这是技术的趋势。

前面废话太多直接上推荐吧：

优先推荐 video.js 的方案，因为它支持多个播放核心，而且插件非常多，你只需要使用

videojs/videojs-contrib-hls就可以了。

再安利一个非常纯粹的方案，就是 hls.js它需要你手进行 video 的绑定。

75 Team 也开源的一个播放器： Chimeejs/chimee

当然我们 team 也会开源一款类似 youtube 的播放核心。

https://github.com/jackzhang1204/sewise-player

功能列表：

支持HTML5，Flash视频播放技术。
支持多平台，PC包括Windows, MacOS, Linux等。Mobile包括Android, IOS, Windows Phone等。
支持多浏览器兼容，如IE6/7/8/9/10、Google Chrome、Firefox、safari、Opera等。
支持多种视频格式，如mp4、m3u8、oga、webm、theora、flv、f4v等。
支持多种协议直播流，如rtmp、hls、http等。
支持Flash播放m3u8文件，以及AES-128解码播放。
支持PC与Mobile平台播放器自动识别功能。
支持浏览器HTML5与Flash特性检测。
支持HTML5不同视频格式地址Fallback兼容播放功能。
支持Flash Fallback到HTML5视频播放功能。
支持播放地址AMF, AJAX, JOSNP类型请求。
支持自定义HTML5与Flash皮肤，让您无需了解专业的编码技术也可以制作出超烗风格的皮肤。
支持前置广告（swf, 图片, 视频）。
支持字幕。
支持多种播放参数设定，并支持启动参数设置。
支持丰富的api接口，以此可以快速打造功能强大的插件

移动端 HTML5 video 视频播放实践

Mon, 26 Jun 2017 13:32:16 CST

移动端 HTML5 使用原生 <video> 标签播放视频，目前正被广泛的使用，虽然在各个平台上存在各种各样的兼容问题，给开发者带来不小的障碍，不过根据前人的经验，我们还是能从中找到蛛丝马迹来解决在开发中遇到的问题。

此篇文章，主要是总结我在项目中遇到的一些坑，也为后面的小伙伴在使用 video 标签时，提供一些思路和方法。

在移动端售后项目中，我主要遇到两个问题：

iOS WebView 中异步添加 video 标签无法播放。
iPhone6s iOS WebView 中异步添加 video 标签需要点击两次才能播放。

一、项目背景

提升网购用户体验，还是要聚焦在售后服务的环节上。所以此次售后体验的飞跃项目（从京东 app -我的-退换/售后进入）对 H5 页面进行了重构，对业务功能进行了升级。

其中一个升级模块就是在申请售后环节，在之前仅有拍照基础上，增加了音频和 小视频的功能，借此机会为用户提供更丰富的多媒体反馈功能。技术上采用的是 H5 + JDReact 结合的模式。用户在点击录视频 icon 会触发调用React原生应用录制小视频，后端同学采用轮询方式往 H5 页面动态添加 video 标签。之后用户可以马上点击刚刚录制的小视频播放观看。算是在申请时候为用户增加的一个更为直观反馈的功能，也便于京东客服的处理。

二、了解 video 标签一些基本的属性

既然决定用 video 标签实现视频回显播放，那么先了解 video 标签都有哪些重要的属性。

属性名字	描述
src	视频媒体地址
autoplay	自动播放。iOS 蜂窝网络和 safari 中不支持。WebView 中可单独配置开启。安卓可能支持该属性
loop	循环播放。iOS 支持，Android 可能支持
controls	播放器控制条。iOS 和 Android 支持
width	视频的宽。iOS 和 Android 都需要给出
height	视频的高。iOS 和 Android 都需要给出
poster	封面图片。iOS 支持，Android 不一定支持，而且各产商表现差异大

对于 width 和 height，比较流行的做法还是以 1px * 1px 的形式放在视觉边缘的位置。以此避免隐藏和设置 0 宽高的 video，使得视频处于未激活状态。另外 poster 封面的在各个平台的兼容性并不好，体验较差。所以我直接用 <img /> 来做一个初始化展示的效果图。

<div class="video-wrap">
    <img src="../media/demo.jpg">
    <video id="video" height="2" width="1" src="../videoDemo.mp4;"></video>
    <span class="play"></span>
</div>

这里有一个小技巧，对于宽高。初始设定，可以使用 1px * 2px。对于安卓手机全屏播放基本会初始竖屏播放，而不是先横屏播放，然后加载视频后得到视频宽高比后再切换成竖屏播放。

三、了解 video 标签一些基本的方法

在打算使用 video 标签时，我专门去网上找了一些资料。这样可以在遇到兼容性的时候做到有备无患。

方法	iOS	Android
play	只是要播放视频，响应的是 video.play() 方法，并不代表已经开始播放	和 iOS 一样，仅是响应 video.play() 方法
durationchange	会执行一次，一定会获取到视频的 duration	可能会执行多次，只有最后一次才能获取到真实的 duration，前面的 duration 都是0；但低版本 Android 可能获取到的 duration 是 0 或 1
canplay	可以认为是视频元素没有问题，可以运行，没有更多含义了，基本用不上	同 iOS
canplaythrough	会有明确的缓冲，表示可以流畅播放了	没有什么用，视频仍然会卡住，数据可能还没有开始加载
playing	明确表示播放开始了	依然没有用，视频可能并没有开始播放
progress	有明确的下载，可以获取到当前的 buffer，并且全部下载完毕后不在触发	不一定有明确的数据下载，并且全部下载完毕后依然继续触发
timeupdate	会有明确的进度变化，可以获取到currentTime	进度不一定变化，currentTime 可能总是 0，但是第一次有 currentTime 变化的timeupdate 事件一定代表了视频开始播放了
error	iOS 中会有明确的错误抛出	Android 中某些浏览器会莫名其妙的抛出 error
stalled	网络状况不佳，导致视频下载中断	在没有 play 之前，也可能会抛出该事件

虽然 video 的方法有很多，但是兼容性还是比较头疼的。不过在项目我仅仅用到了 play，load 方法。下面说一下我遇到的问题吧。

iOS WebView 中异步添加 video 标签无法播放。

在售后的项目中，因为需要支持 JDReact 原生应用提供多媒体功能。所以小视频只需要在京东 app 内 WebView 做适配就可以。第一个问题就出现了。后端将视频 video 标签动态添加到页面中后，iOS app 内点击播放。发现无法播放。而在安卓版的京东 app 内 x5 内核的浏览器是可以播放的。

mediaWrapper.delegate('.load-video .video-wrap','click',function(){        
        video.play();
        video.addEventListener('ended',function(){
            video.webkitExitFullscreen();
        });
});

当然有小伙伴会表示，那不动态添加 video 标签，采用更换 src 的方式来回显用户录制的小视频。经过测试，依然无法播放。究其原因，video 标签和audio 标签不同于一般的 img 多媒体标签，更换 DOM 或者属性值就能使其激活生效。video 标签和 audio 标签本身具有了时间特性，因而采用了不同的模式。所以在播放视频之前，需要调用 video 的 load 方法来重新加载更新视频。

mediaWrapper.delegate('.load-video .video-wrap','click',function(){
        if(videoIsPlay){
            video.play();
            return false;
        }
        video.load();//PAY ATTENTION!                
        video.play();

        video.addEventListener('ended',function(){
        video.webkitExitFullscreen();
            videoIsPlay = true;
        });
});

iPhone7 的京东 app 可以播放视频了。感觉革命已经成功。突然发现自己的 iPhone6s 依然不能播放，再点一次突然又可以播放了。这又是什么原因？

iPhone6s iOS WebView 中异步添加 video 标签需要点击两次才能播放

我们先看一下需要点两次效果图。

京东 app 采用的内嵌 UIWebView 内核浏览器，如果比较古老的话，会触发需要用户点两次 bug。load 方法和 play 方法在 iOS 上都是需要用户手动触发的。就算你在点击回调里写两次 load 方法或者 play 方法依然是没用的。不过可以有效利用移动端 click 事件的 300ms 延迟特点来解决两次点击播放问题。给 video 同时绑定两个事件 tap 和 click 事件，在 tap 事件和 click 都调用 load 方法。并且在 click 事件中调用 play 方法。这样就能完美解决该问题了。

mediaWrapper.delegate('.load-video .video-wrap','tap',function(){
      var video = document.getElementById('my-video'); 
      if(videoIsPlay){
          return false;
      }
      video.load(); 
});

看一下修改后的效果图：

四、最后总结

我的移动端的经验还不是很丰富，对于 video 标签，只能说里面水太深~。不过赶在618之前圆满的完成了售后客服的飞跃项目，获得不少成长，感谢并肩战斗的后端、设计、产品等同学，特别感谢封面设计：竹子。最后我们来整体看一下售后小视频的功能吧。

参考资料

HTML5 Video Events and API

https://www.w3.org/2010/05/video/mediaevents.html

Exploring HTML 5’s Audio/Video Multimedia Support

http://www.devx.com/webdev/Article/43324

移动端 HTML5 <video> 视频播放优化实践

http://zhaoda.net/2014/10/30/html5-video-optimization/

让ie6 7 8 9支持html5 websocket

Fri, 23 Dec 2016 20:52:15 CST

结果：

　　从github上的 web-socket-js (socket.io好像也是用这个做的他们的flash替代传输方式)改过来的。不过值得注意的是里面的flash websocket代理文件,文件实在是很大，有174k

很好奇，就反编译看下，

是flex做的，这点很不喜欢，因为我没有flex builder也不想因为去改代码重新装一个，然后mx包下面的是flex的组件，com包下是adobe封装的socket和两个加密包 .

最下面那个包才是最主要的，代码不是很复杂，就是利用actionscript3的socket,与那边服务端socket握手，传递消息，不过区别是，在connect的时候要把header封装成websocket的样子

这也是flash模拟websocket的原理。事实上，直接用flash的socket就可以完成与服务端的双向信息传递，不过缺点是需要在服务端的socket代码写很多其他的代码，比如多线程，信息解析等，直接用websocket就不用写那些多余的代码了。

我花了点时间把源码里面和加密有关的代码都注释掉，加密的代码都是和wss（类似于https）有关的，用flash编译了一下，主要就是把mx包加到flash编译里面，flex是臃肿版的flash，结果大小只有20k!原来加密让文件大太多了！

websocket.js

define("websocket", function() {
(function() {
  if (window.WEB_SOCKET_FORCE_FLASH) {
    // Keeps going.
  } 
  else if (window.WebSocket) {
    return;
  } else if (window.MozWebSocket) {
    // Firefox.
    window.WebSocket = MozWebSocket;
    return;
  }
  var logger;
  if (window.WEB_SOCKET_LOGGER) {
    logger = WEB_SOCKET_LOGGER;
  } else if (window.console && window.console.log && window.console.error) {
    logger = window.console;
  } else {
    logger = {log: function(){ }, error: function(){ }};
  }
  window.WebSocket = function(url, protocols, proxyHost, proxyPort, headers) {
    var self = this;
    self.__id = WebSocket.__nextId++;
    WebSocket.__instances[self.__id] = self;
    self.readyState = WebSocket.CONNECTING;
    self.bufferedAmount = 0;
    self.__events = {};
    if (!protocols) {
      protocols = [];
    } else if (typeof protocols == "string") {
      protocols = [protocols];
    }
    self.__createTask = setTimeout(function() {
      WebSocket.__addTask(function() {
        self.__createTask = null;
        WebSocket.__flash.create(
            self.__id, url, protocols, proxyHost || null, proxyPort || 0, headers || null);
      });
    }, 0);
  };
  WebSocket.prototype.send = function(data) {
    if (this.readyState == WebSocket.CONNECTING) {
      throw "INVALID_STATE_ERR: Web Socket connection has not been established";
    }
    var result = WebSocket.__flash.send(this.__id, encodeURIComponent(data));
    if (result < 0) { // success
      return true;
    } else {
      this.bufferedAmount += result;
      return false;
    }
  };
  WebSocket.prototype.close = function() {
    if (this.__createTask) {
      clearTimeout(this.__createTask);
      this.__createTask = null;
      this.readyState = WebSocket.CLOSED;
      return;
    }
    if (this.readyState == WebSocket.CLOSED || this.readyState == WebSocket.CLOSING) {
      return;
    }
    this.readyState = WebSocket.CLOSING;
    WebSocket.__flash.close(this.__id);
  };
  WebSocket.prototype.dispatchEvent = function(event) {
    var events = this.__events[event.type] || [];
    for (var i = 0; i < events.length; ++i) {
      events[i](event);
    }
    var handler = this["on" + event.type];
    if (handler) handler.apply(this, [event]);
  };
  WebSocket.prototype.__handleEvent = function(flashEvent) {
    if ("readyState" in flashEvent) {
      this.readyState = flashEvent.readyState;
    }
    if ("protocol" in flashEvent) {
      this.protocol = flashEvent.protocol;
    }
    var jsEvent;
    if (flashEvent.type == "open" || flashEvent.type == "error") {
      jsEvent = this.__createSimpleEvent(flashEvent.type);
    } else if (flashEvent.type == "close") {
      jsEvent = this.__createSimpleEvent("close");
      jsEvent.wasClean = flashEvent.wasClean ? true : false;
      jsEvent.code = flashEvent.code;
      jsEvent.reason = flashEvent.reason;
    } else if (flashEvent.type == "message") {
      var data = decodeURIComponent(flashEvent.message);
      jsEvent = this.__createMessageEvent("message", data);
    } else {
      throw "unknown event type: " + flashEvent.type;
    }
    this.dispatchEvent(jsEvent);
  };
  WebSocket.prototype.__createSimpleEvent = function(type) {
    if (document.createEvent && window.Event) {
      var event = document.createEvent("Event");
      event.initEvent(type, false, false);
      return event;
    } else {
      return {type: type, bubbles: false, cancelable: false};
    }
  };
  WebSocket.prototype.__createMessageEvent = function(type, data) {
    if (window.MessageEvent && typeof(MessageEvent) == "function" && !window.opera) {
      return new MessageEvent("message", {
        "view": window,
        "bubbles": false,
        "cancelable": false,
        "data": data
      });
    } else if (document.createEvent && window.MessageEvent && !window.opera) {
      var event = document.createEvent("MessageEvent");
        event.initMessageEvent("message", false, false, data, null, null, window, null);
      return event;
    } else {
      return {type: type, data: data, bubbles: false, cancelable: false};
    }
  };
  WebSocket.CONNECTING = 0;
  WebSocket.OPEN = 1;
  WebSocket.CLOSING = 2;
  WebSocket.CLOSED = 3;
  WebSocket.__isFlashImplementation = true;
  WebSocket.__initialized = false;
  WebSocket.__flash = null;
  WebSocket.__instances = {};
  WebSocket.__tasks = [];
  WebSocket.__nextId = 0;
  WebSocket.loadFlashPolicyFile = function(url){
    WebSocket.__addTask(function() {
      WebSocket.__flash.loadManualPolicyFile(url);
    });
  };
  WebSocket.__initialize = function() {
    if (WebSocket.__initialized) return;
    WebSocket.__initialized = true;
    if (WebSocket.__swfLocation) {
      window.WEB_SOCKET_SWF_LOCATION = WebSocket.__swfLocation;
    }
  };
  WebSocket.__onFlashInitialized = function() {
    setTimeout(function() {
      WebSocket.__flash =main.get_flash_obj("webSocketFlash");
      WebSocket.__flash.setCallerUrl(location.href);
      WebSocket.__flash.setDebug(!!window.WEB_SOCKET_DEBUG);
      for (var i = 0; i < WebSocket.__tasks.length; ++i) {
        WebSocket.__tasks[i]();
      }
      WebSocket.__tasks = [];
    }, 0);
  };
  WebSocket.__onFlashEvent = function() {
    setTimeout(function() {
      try {
        var events = WebSocket.__flash.receiveEvents();
        for (var i = 0; i < events.length; ++i) {
          WebSocket.__instances[events[i].webSocketId].__handleEvent(events[i]);
        }
      } catch (e) {
        logger.error(e);
      }
    }, 0);
    return true;
  };
  WebSocket.__log = function(message) {
    logger.log(decodeURIComponent(message));
  };
  WebSocket.__error = function(message) {
    logger.error(decodeURIComponent(message));
  };
  WebSocket.__addTask = function(task) {
    if (WebSocket.__flash) {
      task();
    } else {
      WebSocket.__tasks.push(task);
    }
  };
})();
return WebSocket;
});

websocket_main.js

require(['html5/websocket','avalon-min'],function(WebSocket,avalon){
    var $=function(id){
        return document.getElementById(id);
    };
    WEB_SOCKET_DEBUG = true;
    var ws;
        ws = new WebSocket("ws://localhost:8888/new-msg/socket");
        ws.onopen = function() {
            output("onopen");
        };
        ws.onmessage = function(e) {
            output("onmessage: " + e.data);
        };
        ws.onclose = function() {
            output("onclose");
        };
        ws.onerror = function() {
            output("onerror");
        };
    avalon.bind($('send'),'click',function(){
            var input = $("input1");
            ws.send(input.value);
            output("send: " + input.value);
            input.value = "";
            input.focus();
    });
    avalon.bind($('close'),'click',function(){
            ws.close();
    });
    function output(str) {
        var log = document.getElementById("log");
        var escaped = str.replace(/&/, "&amp;").replace(/</, "&lt;")
                .replace(/>/, "&gt;").replace(/"/, "&quot;"); // "
        log.innerHTML = escaped + "<br>" + log.innerHTML;
    }
});

HTML：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://localhost/twitter/js/libs/seed-min.js"></script>
<script type="text/javascript" src="http://localhost/twitter/js/libs/flash_embed.js"></script>
<script src="http://localhost/twitter/js/main.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="input1">
    <input type="submit" value="Send" id='send'>
    <button id='close'>close</button>
    <div id="log"></div>
    <div id='a' style='width: 1px; height: 1px;'></div>
    <script type="text/javascript">
        flash_object.embedSWF('http://localhost:8888/swf/WebSocketMain.swf', 'a', 'webSocketFlash', '100%', '100%');
    </script>
    <script type="text/javascript" src='http://localhost/twitter/js/libs/html5/websocket_main.js'></script>
</body>
</html>

下面很重要，在运行前一定要开启服务端(python)的socket

import socket
import time
from threading import Thread

class returnCrossDomain(Thread):
    def __init__(self,connection):
        Thread.__init__(self)
        self.con = connection
    def run(self):
        clientData  = self.con.recv(1024)
        xmlData  = '''<?xml version="1.0" encoding="utf-8"?>'''
        xmlData += '''<cross-domain-policy><policy-file-request/>'''
        xmlData += '''<allow-access-from domain="*" to-ports="*" />'''
    xmlData += '''</cross-domain-policy>\0'''
        try:
            self.con.send(xmlData)
        except Excepiton,e:
            pass
        self.con.close()
def main():
    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    sock.bind(('localhost',843))
    sock.listen(10000000)
    print 'socket'
    while True:
        try:
            connection,address = sock.accept()
            returnCrossDomain(connection).start()
        except:
            time.sleep(1)

if __name__=="__main__":
    main()

服务端用python的tornado写的，也一样在运行前开启tornado

# -*- coding: utf-8 -*-
import base
import tornado.websocket

def send_message(message):
    for handler in ChatSocketHandler.socket_handlers:
        handler.write_message(message)

class ChatSocketHandler(tornado.websocket.WebSocketHandler):
    socket_handlers = set()

    def open(self):
        ChatSocketHandler.socket_handlers.add(self)
        print 'websocket'
        send_message('A new user has entered the chat room.')

    def on_close(self):
        ChatSocketHandler.socket_handlers.remove(self)
        print 'websocket close'
        send_message('A user has left the chat room.')

    def on_message(self, message):
        print 'message:'+message
        send_message(message)

tornado很好的封装了websocket，用起来很简单，加上flash模拟websocket兼容不支持websocket的浏览器，这样可以完美的利用高效的websocket.

如果嫌弃flash的话，还是用ajax长连接，tornado很好的支持ajax长连接，性能很好.

socket.io也是个不错的选择，提供了多种传输方案。

WebSocketMain.swf文件及源码见附件

flash_websocket.zip (320.1 KB)

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

html5实现本地图片预览功能

Thu, 09 Jun 2016 21:13:19 CST

1.利用FileReader进行图片本地预览

FileReader类型实现的是一种异步文件读取机制，用来把文件读入内存，并且读取文件中的数据。各大浏览器的支持情况：

`构造方法`

`var reader = new FileReader()；`

为了读取文件中的数据，FileReader提供了如下几个方法：

readAsText(file,encoding)：以纯文本的形式读取文件，将读取到的文本保存在result属性中，第二个参数指定编码类型，可选。

readAsDataURL(file)：读取文件并将文件以数据URL的形式保存在result属性中。

readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中，字符串中的每一个字符表示一个字节。

readAsArrayBuffer(file): 将一个包含文件内容的ArrayBuffer保存在result。

了解了FileReader的基本使用后，来实现下图片的本地预览功能：

<input type="file" name="inputfile" accept="image/*" onchange="readFile(this.files[0])">
<div id="preview"></div>

function readFile(f){
    var reader = new FileReader();
    reader.readAsDataURL(f); //base64编码
   reader.onload = function(){
         var preview = document.querySelector('#preview');
         var img = document.createElement("img");
         img.src = reader.result;
         preview.appendChild(img);
    }
   reader.onerror = function(e){
         console.log("Error"+e);
   }
}

页面效果看起来是这个样子的：

当选择图片后就可以本地预览啦，结合ajax实现图片上传预览功能。

效果图：

2.URL.createObjectURL()进行图片本地预览

URL.createObjectURL() 静态方法会创建一个 DOMString，它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示着指定的 File 对象或者 Blob 对象。

`构造方法`

`objectURL` `=` URL.createObjectURL(blob); //参数blob：是用来创建 URL 的 `file` 对象或者 `Blob` 对象

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用window.URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

HTML结构与之前一样。

if (window.URL) {
     var preview = document.querySelector('#preview');
     var img = document.createElement("img");
     img.src = window.URL.createObjectURL(f);
     img.onload = function(){
	   window.URL.revokeObjectURL(this.src); //释放内存
     }
     preview.appendChild(img);
}

效果如上。

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

三天学会HTML5——SVG和Canvas的使用

Thu, 04 Feb 2016 09:26:53 CST

在第一天学习了HTML5的一些非常重要的基本知识，今天将进行更深层学习

首先来回顾第一天学习的内容，第一天学习了新标签，新控件，验证功能，应用缓存等内容。

第2天将学习如何使用Canvas 和使用SVG 实现功能

Lab1—— 使用Canvas

Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。

初始化

1. 创建HTML页面

<html>
<head></head>
<body></body>
</html>

2. 在Body标签内添加Canvas

<canvas id="MyCanvas" width="500px" height="500px" style="border:1px solid black;">

</canvas>

3. 在<head>标签内添加Script 标签

<head>

<script type="text/javascript">

</script>

</head>

4. 在Script 标签内创建JavaScript 函数 Draw ，Draw函数能够访问Canvas 对象

function Draw()

{
        var ctx = document.getElementById('MyCanvas').getContext("2d");      
        //Canvas Code Comes Here
}

Lab 1.1 使用 Path

Path 由0个或多个Sub Path组成，每个Sub path 是是由一个或多个终点组成，每个终点是通过直线或曲线连接的。

Lab1.1.1 使用Single 创建Path;

脚本片段：

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.stroke();

ctx.strokeStyle = "red";

ctx.lineTo(25, 100);

ctx.stroke();

输出：

上述示例中Path 是由2个子路径组成的。

BeginPath—— 创建新路径

strokeStyle 用于设置样式

每次调用Stroke 方法，所有的子路径都会使用当前的Style 重新画。

Lab 1.1.2 使用Multiple Begin Path创建Path

核心代码：

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(75, 100);

ctx.strokeStyle = "red";

ctx.lineTo(25, 100);

ctx.stroke();

输出：

Lab1.1.3 理解ClosePath

核心代码：

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.closePath();

ctx.stroke();

输出：

Lab1.1.4 理解Fill

核心代码

ctx.beginPath();

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.fillStyle = "red";

ctx.fill();

输出：

Lab1.1.5 画曲线

quadraticCurveTo 函数定义了四个参数，前两个点是控制点，用于曲率计算，后两个参数是终点的曲度核心代码：

ctx.beginPath();

ctx.moveTo(175, 50)

ctx.quadraticCurveTo(60, 360, 175, 300);

ctx.stroke()

输出：

Lab 1.2 使用Rectangle

Lab1.2.1 画矩形

ctx.fillStyle="red";

ctx.fillRect(75, 75, 150, 150);

           

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.strokeRect(175,175,150,150);

输出:

Lab1.2.2 清除矩形

代码：

ctx.fillStyle="red";

ctx.fillRect(75, 75, 250, 250);

ctx.clearRect(125, 125, 100, 100);

输出

Lab 1.3 使用渐变色

Lab1.3.1 使用线性渐变色

var grd = ctx.createLinearGradient(75, 75, 225, 75);

grd.addColorStop(0, "black");

grd.addColorStop(0.2, "magenta");

grd.addColorStop(0.4, "blue");

grd.addColorStop(0.6, "green");

grd.addColorStop(0.8, "yellow");

grd.addColorStop(1, "red");

ctx.fillStyle = grd

ctx.fillRect(75, 75, 150, 150);

输出

注意：

reateLinearGradient 包含四个参数x1,y1,x2,y2

1. 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。

2. 如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。

3. 如果x1!=x2且y1!=y2,渐变色方向则为对角。

AddColorStop 函数包含两个参数。

1. 0到1 之间的数字,用来表示渐变色起始和终点的位置。

2. Color;

Lab1.3.2 使用圆形渐变

代码：

var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85);

grd.addColorStop(0, "orange");

grd.addColorStop(0.2, "magenta");

grd.addColorStop(0.4, "blue");

grd.addColorStop(0.6, "green");

grd.addColorStop(0.8, "yellow");

grd.addColorStop(1, "red");

ctx.fillStyle = grd

ctx.fillRect(75, 75, 150, 150);

输出

CreateRadialGradiant包含6个参数，x1,y1,r1,x2,y2,r2

1, x1,y1,r1代表开始圆形的圆心和半径

2. x2,y2,r2 表示结束圆的圆心和半径

Lab 1.4 使用圆形

核心代码：

ctx.beginPath();

ctx.fillStyle="yellow";

ctx.strokeStyle="green";

ctx.lineWidth = "8";

ctx.arc(100, 175, 85, 0, 2*Math.PI);

ctx.fill();

ctx.stroke();


ctx.beginPath();

ctx.fillStyle = "green";

ctx.strokeStyle = "yellow";

ctx.lineWidth = "8";

ctx.arc(285, 175, 85, 0, 1 * Math.PI);

ctx.fill();

ctx.stroke();

输出：

DrawArc 函数包含5个参数，x,y,r,sa,ea

x 和y 表示圆心

r表示半径

sa 和ea 是开始边缘和结束边缘

Lab1.5 使用Text

代码：

ctx.beginPath();

ctx.font = "30px Segoe UI";

ctx.fillText("www.StepByStepSchools.Net",0, 150);

输出：

fillText/stokeText具有三个参数

1. 实际输出的文本

2. x,y 是可选值。

Lab 1.6 Scale

ctx.strokeRect(75, 75, 75, 75);

ctx.scale(2,2);

ctx.strokeRect(75, 75, 75, 75);

输出：

Lab 1.7 旋转

代码片段：

ctx.rotate(0.2);

ctx.strokeRect(75, 75, 75, 75);

输出：

Lab 1.8 转换

代码：

ctx.strokeRect(0, 0, 150, 150);

ctx.translate(150, 150);

ctx.strokeRect(0, 0, 150, 150);

输出：

Lab 1.9 保存和重置Canvas 的状态

ctx.fillStyle="red";

ctx.fillRect(75, 75, 150, 150);


ctx.fillStyle = "blue";             

ctx.fillRect(90, 90, 50, 50);


ctx.save();


ctx.fillStyle = "yellow";

ctx.fillRect(90, 160, 50, 50);


ctx.save();

ctx.fillStyle = "green";

ctx.restore();

ctx.restore();

ctx.fillRect(160, 160, 50, 50);

输出

Lab 1.10 使用图像

vari = new Image();
i.src = "Desert.jpg";
i.onload = function () {
    //Draw Squqre
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.drawImage(i, 0, 0);
ctx.strokeRect(60, 120, 70, 80);

    //draw Text
ctx.strokeStyle = "yellow";
ctx.font = "30px Segoe UI";
ctx.lineWidth = 1;
ctx.strokeText("My Home", 80, 40);

    //Draw Arrow
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.moveTo(110, 110);
ctx.lineTo(125, 40);

ctx.moveTo(110, 110);
ctx.lineTo(100, 90);

ctx.moveTo(110, 110);
ctx.lineTo(126, 95);
ctx.stroke();
};

输出：

Lab1.11 使用Canvas 生成动画

一旦在Canvas 填充好东西就无法修改，可采用以下方法来修改：

1. 使用ClearRect 函数删除存在的元素

2. 添加新属性重画元素

当以上策略与传统的JS 函数结合，可使用TimeOut 或SetInterval 方法来实现，可产生动画。

代码：

var interval;
var x = 0, y = 0;
functiondrawInAnimation()
{
varctx = document.getElementById('MyCanvas').getContext("2d");

ctx.beginPath();
ctx.moveTo(x, y);
ctx.clearRect(x , y, 50, 50);
if (x >document.getElementById('MyCanvas').width) {

        x = 0;
        y += 50;
if (y + 50 >document.getElementById('MyCanvas').height)
        {
            x = 0; y = 0;
        } 
    }
else {
        x += 15;
    }
ctx.fillStyle = getRndColor();
ctx.fillRect(x, y,50,50);
}
functiongetRndColor() {
var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

interval = setInterval("drawInAnimation()", 15);

输出：

Lab 2 使用SVG 工作

如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。

初始化

1. 新建HTML页面

<html>

<head></head>

<body></body>

</html>

2. 在body 标签内新建Canvas :

<SVG id="MySVG" width="500px" height="500px" style="border:1px solid black;">

</SVG >

Lab2.1 画出多种形状

代码：

<svg width="205" height="200">


    <!--surrounding border-->

    <rect x="0" y="0" width="205" height="200" style="fill: rgb(199, 240, 185);"> </rect>

    <!--surrounding border-->



    <!--Hat Start-->

    <rect x="78" y="10" width="44" height="70" style="fill: black; stroke: black; "></rect>

    <ellipse cx="100" cy="20" rx="67" ry="12" stroke="white"

                stroke-width="0.5" fill="black"></ellipse>          

    <!--Hat End-->



    <!--Left ear-->

    <ellipse cx="55" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>


    <!--Right ear-->

    <ellipse cx="145" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>


    <!--Face-->

    <circle cx="100" cy="105" r="50" stroke="black" stroke-width="2" fill="rgb(230, 231, 194)" />


    <!--Left Eye-->

    <ellipse cx="75" cy="95" rx="10" ry="20"

                style="fill:white;stroke:black;stroke-width:1" />

    <!--Left Eye ball-->

    <ellipse cx="80" cy="95" rx="5" ry="12"

                style="fill:black;stroke:black;stroke-width:1" />


    <!--Right Eye-->

    <ellipse cx="125" cy="95" rx="10" ry="20"

                style="fill:white;stroke:black;stroke-width:1" />

    <!--Right Eye ball-->

    <ellipse cx="120" cy="95" rx="5" ry="12"

                style="fill:black;stroke:black;stroke-width:1" />


    <!--Mouth start-->

    <clipPath id="cut-off-bottom">

        <rect x="70" y="135" width="60" height="30" />

    </clipPath>

    <ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)"

                style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2" />

    <!--Mouth End-->


    <!--Nose-->

    <polygon points="100,115 85,125 115,125"

                style="fill: brown;

            stroke-width: 1" />


    <!--Divider-->

    <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown;

stroke-width:2" />

    <text x="25" y="185" font-family="Comic Sans MS'" fill="Blue" >A coder can be creative</text>

</svg>

输出：

Lab 2.2SVG 动画

SVG 使得动画制作变得简单：

初始化设置：

<svg width="205" height="220">

        <rect x="0" y="0" width="205" height="220" style="fill: rgb(199, 240, 185);">
        </rect>

....
</svg>

眨眼动画：

<!--Left Eye-->

        <ellipse cx="75" cy="95" rx="15" ry="15"

                    style="fill:white;stroke:black;stroke-width:1" />

        <!--Left Eye ball-->

        <ellipse cx="75" cy="95" rx="5" ry="5"

                    style="fill:black;stroke:black;stroke-width:1">

            <animate attributeName="cx" attributeType="XML"

                        from="75" to="85" id="Left1" repeatCount="1"

                        begin="0s;Left5.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="85"

                    begin="Left1.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Left2"

                                from="0 75 95" to="360 75 95"

                                begin="Left1.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="85" to="65" id="Left3"

                        begin="Left2.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="65"

                    begin="Left3.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Left4"

                                from="360 75 95" to="0 75 95"

                                begin="Left3.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="65" to="75" id="Left5"

                        begin="Left4.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="75"

                    begin="Left4.end" >

            </set>

        </ellipse>

<!--Right Eye-->

        <ellipse cx="125" cy="95" rx="15" ry="15"

                    style="fill:white;stroke:black;stroke-width:1" />

        <!--Right Eye ball-->

        <ellipse cx="125" cy="95" rx="5" ry="5" style="fill:black;stroke:black;stroke-width:1">

            <animate attributeName="cx" attributeType="XML"

                        from="125" to="135" id="Right1" repeatCount="1"

                        begin="0s;Right5.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="135" begin="Right1.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Right2"

                                from="0 125 95" to="360 125 95"

                                begin="Right1.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="135" to="115" id="Right3"

                        begin="Right2.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="115"

                    begin="Right3.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Right4"

                                from="360 125 95" to="0 125 95"

                                begin="Right3.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="115" to="125" id="Right5"

                        begin="Right4.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="125" begin="Right4.end" />

        </ellipse>

张嘴动画：

<clipPath id="cut-off-bottom">

    <rect x="70" y="135" width="60" height="11">


        <animate attributeName="y" attributeType="XML"

                    from="135" to="125" id="MouthClipAnimation1"

                    begin="0;MouthClipAnimation3.end+3" dur="1s" />

        <animate attributeName="height" attributeType="XML"

                    from="11" to="22" id="MouthClipAnimation2"

                    begin="0;MouthClipAnimation4.end+3" dur="1s" />


        <set attributeName="y" attributeType="XML"

                to="125"

                begin="MouthClipAnimation1.end-0.1" />

        <set attributeName="height" attributeType="XML"

                to="22"

                begin="MouthClipAnimation2.end-0.1" />


        <animate attributeName="y" attributeType="XML"

                    from="125" to="135" id="MouthClipAnimation3"

                    begin="MouthClipAnimation1.end+3" dur="1s" />

        <animate attributeName="height" attributeType="XML"

                    from="22" to="11" id="MouthClipAnimation4"

                    begin="MouthClipAnimation2.end+3" dur="1s" />


        <set attributeName="y" attributeType="XML"

                to="135"

                begin="MouthClipAnimation3.end-0.1" />

        <set attributeName="height" attributeType="XML"

                to="11"

                begin="MouthClipAnimation4.end-0.1" />

    </rect>

</clipPath>

<ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)"

            style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2">


    <animate attributeName="cy" attributeType="XML"

                from="125" to="135" id="MouthEllipseAnimation1"

                begin="0;MouthEllipseAnimation4.end+3" dur="1s" />

    <animate attributeName="rx" attributeType="XML"

                from="30" to="8" id="MouthEllipseAnimation2"

                begin="0;MouthEllipseAnimation5.end+3" dur="1s" />

    <animate attributeName="ry" attributeType="XML"

                from="20" to="8" id="MouthEllipseAnimation3"

                begin="0;MouthEllipseAnimation6.end+3" dur="1s" />

    <set attributeName="cy" attributeType="XML"

            to="135"

            begin="MouthEllipseAnimation1.end-0.1" />

    <set attributeName="rx" attributeType="XML"

            to="8"

            begin="MouthEllipseAnimation2.end-0.1" />

    <set attributeName="ry" attributeType="XML"

            to="8"

            begin="MouthEllipseAnimation3.end-0.1" />


    <animate attributeName="cy" attributeType="XML"

                from="135" to="125" id="MouthEllipseAnimation4"

                begin="MouthEllipseAnimation1.end+3" dur="1s" />

    <animate attributeName="rx" attributeType="XML"

                from="8" to="30" id="MouthEllipseAnimation5"

                begin="MouthEllipseAnimation2.end+3" dur="1s" />

    <animate attributeName="ry" attributeType="XML"

                from="8" to="20" id="MouthEllipseAnimation6"

                begin="MouthEllipseAnimation3.end+3" dur="1s" />

    <set attributeName="cy" attributeType="XML"

            to="125"

            begin="MouthEllipseAnimation4.end-0.1" />

    <set attributeName="rx" attributeType="XML"

            to="30"

            begin="MouthEllipseAnimation5.end-0.1" />

    <set attributeName="ry" attributeType="XML"

            to="20"

            begin="MouthEllipseAnimation6.end-0.1" />

</ellipse>

盒子动画效果：

<!--Box Anmation-->

        <rect x="0" y="165" width="14" height="14"

              stroke-width="2" fill="brown">

            <animate attributeName="width" attributeType="XML"

                     from="0" to="210" id="leftToRight"

                     begin="0;bottomToTop.end" dur="1s" />

            <set attributeName="width" attributeType="XML"

                 to="14"

                 begin="leftToRight.end-0.2" />

            <set attributeName="x" attributeType="XML"

                 to="191"

                 begin="leftToRight.end-0.2" />


            <animate attributeName="height" attributeType="XML"

                     from="14" to="55" id="topToBottom"

                     begin="leftToRight.end" dur="1s" />

            <set attributeName="height" attributeType="XML"

                 to="14"

                 begin="topToBottom.end-0.2" />

            <set attributeName="y" attributeType="XML"

                 to="206"

                 begin="topToBottom.end-0.2" />


            <animate attributeName="width" attributeType="XML"

                     from="0" to="210" id="rightToLeft"

                     begin="topToBottom.end" dur="1s" />

            <animate attributeName="x" attributeType="XML"

                     from="206" to="0" id="rightToLeft"

                     begin="topToBottom.end" dur="1s" />

            <set attributeName="width" attributeType="XML"

                 to="14"

                 begin="rightToLeft.end-0.2" />

            <set attributeName="x" attributeType="XML"

                 to="0"

                 begin="rightToLeft.end-0.2" />


            <animate attributeName="height" attributeType="XML"

                     from="14" to="55" id="bottomToTop"

                     begin="rightToLeft.end" dur="1s" />

            <animate attributeName="y" attributeType="XML"

                     from="206" to="165" id="bottomToTop"

                     begin="rightToLeft.end" dur="1s" />

            <set attributeName="height" attributeType="XML"

                 to="14"

                 begin="bottomToTop.end-0.2" />

            <set attributeName="y" attributeType="XML"

                 to="165"

                 begin="bottomToTop.end-0.2" />

        </rect>


        <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown;

stroke-width:2" />

        <text x="14" y="200" font-family="Comic Sans MS'" fill="Blue">A coder can be creative</text>

输出

SVG VS Canvas

SVG 和Canvas 区别：

Vector VS Pixel

Canvas 是基于Pixel 而SVG 是基于Vector

简单来说SVG图片是与屏幕分辨率无关的，而Canvas 不是。

XML VS JavaScript

SVG使用语义标记可绘出图形，然而Canvas就只能使用JS脚本代码。

支持事件处理

Canvas 不支持事件处理，SVG 支持。

HTML

  <svg width="120" height="120">

        <circle cx="60" cy="60" r="25" stroke="green"  id="MyCircle"

            stroke-width="8" fill="yellow" onmouseover="IncreaseSize();" onmouseout="DecreaseSize();" />

    </svg>

<input type="button" value="+" onclick="ChangeSize();">

JavaScript

<script type="text/javascript">

    function IncreaseSize ()

    {

                    document.getElementById("MyCircle").r.baseVal.value=50;

    }

    function DecreaseSize()

    {

        document.getElementById("MyCircle").r.baseVal.value = 25;

    }

</script>

输出

```
支持图片保存
```

Canvas 最后可输出为图像，可使用浏览器默认的选项将图像保存。而SVG 不支持。

下一章将要学习什么？

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

HTML5数据可视化第二弹：打造最美3D机房

Mon, 01 Jun 2015 14:25:33 CST

最近项目开发任务告一段落，刚好有时间整理这大半年的一些成果。使用html5时间还不久，对js的认识还不够深入。没办法，以前一直搞java，对js的一些语言特性和概念一时还转换不过来。

上一篇第一弹介绍了项目中做的一个彩虹爆炸图，主要用了 html5的canvas的2d绘制技术。这一回我想介绍一下项目中的一个亮点技术：html5的3D，以及如何用它打造精美的3D机房监控系统。

目标效果图

下图是领导给找的一张的效果参考图，客户希望机房至少能达到下面的3D效果。懂的人都知道，这可是一张设计公司出的装修效果图啊，就算是用max建模，也需要大量的工作，何况咱可是程序员在做数据中心的可视化项目啊。。。强忍心中奔腾的万千头**马，静下心来思考，那就先从搭建一个webGL的场景开始把。

WebGL基本场景搭建

在html5里面使用3D已经不是什么高深技术，它的基础是WebGL，一个openGL的浏览器子集，支持大部分主要3D功能接口。目前最新的浏览器都有比较好的支持，IE需要到11（是的，你没有看错）。

要检测你的浏览器是否支持webGL，直接访问网页 http://get.webgl.org/ 看是否能看到一个旋转的立方体。如果能看到，说明你的浏览器支持webgGL，否则，可以下一个最新的chrome试试吧。相对来说chrome对webGL的支持最好，效率也很优秀。

要在浏览器里面使用webGL，就要研究webGL相关的技术和用法。做3D应用并不是一件轻松的事。就算最简单的搭建一下webGL场景，也需要下面这些代码：

<script>    
    var width = window.innerWidth;  
    var height= window.innerHeight;  
    var container = document.createElement( 'div' );  
    document.body.appendChild( container );  
    var webglcanvas = document.createElement('canvas');               
    container.appendChild(webglcanvas);   
    var gl = webglcanvas.getContext("experimental-webgl");                
    
    function updateFrame () {             
      gl.viewport ( 0, 0, width, height );  
            gl.clearColor(0.4, 0.4, 0.7, 1);  
            gl.clear ( gl.COLOR_BUFFER_BIT );       
             setTimeout(   
        function(){updateFrame()},  
                20);  
         }  

    setTimeout(   
      function(){
        updateFrame();
      },  
    20);  
</script>

和html一样，需要先创建一个canvas元素，并获得其webgl上下文：

var gl = webglcanvas.getContext("experimental-webgl");

然后在一个updateFrame的函数中，像html5的2d context一样，去绘制3D的内容。另外，要再起一个死循环，每隔**毫秒调用一次这个updateFrame函数来重绘场景。和2D不同，3D场景里面的变化是随时随地的，所以需要不停刷新，就像播放电影或视频，静止不动的画面基本没有，所以死循环刷新基本是必要的。不过实际项目使用中会有很多优化，尽量做到“按需刷新”，节省cpu和移动设备电量。这一点也是很重要的，有感兴趣的同学，可以单独写文章介绍。这段程序基本上什么也没做，就画了一个静止不动的区域，如下图：

虽然看不见任何3D的内容，不过它已经是一个最简单的webgl程序了。我们的精美的3D机房，也是要在这上面不断丰富而已。

对象封装

要做项目，搭建下去工作量太大了，时间周期也不允许。使用第三方辅助工具是不可避免的，像Three.js、twaver.js都是选择。这些工具都可以提供3D的基本对象和各种特效。当然这都不是最主要的，主要是如何利用它做出我想要的效果：好看。为了避免大量修改代码，在项目里做了一些封装，把原始3D的立方体等对象进行进一步封装，让一个json数据就可以提供这些对象的定义。这样使用起来就比较方便了。Json大致结构如下：

var json={	
	objects: [{
		name: '地板',
		…
	},{
	…
	}],
}

下面我们逐一来看这些3D对象是怎么进行美化的，过程可能稍显啰嗦，但实际工作就是这么繁琐的有木有？

地板和斜坡

第一个要做，也是应该比较简单的，就是地板。这个地板应该是一个有点厚度、有格子贴图的薄薄立方体平面。还好经过封装，就写一段json对象就能定义了：

{
		name: '地板',
		type: 'cube',
		width: 1600,
		height: 10,
		depth: 1300,
			
		style: {
			'm.color': '#BEC9BE',
			'm.ambient': '#BEC9BE',
		}
}

通过定义，创建一个13米*16米的地板块：

只有颜色还不够，找一个地板砖纹理图。需要注意的是，纹理图的尺寸都需要是宽和高都是2的幂，例如128x128、256*256等，这样出来效果才会好。这也是3D软件一般所要求的。另外纹理要能连续拼接不露破绽，这样才好。例如下面我google出来的图：

在style里面添加：

   'top.m.texture.image': 'images/floor.png',
   'top.m.texture.repeat': new mono.Vec2(10,10),

效果如下：

有图片材质纹理，效果果然好多了。不过客户说他们这里底面有一个方便运送设备的斜坡，要画出来。这……

后来想到twaver里面的对象可以支持运算。可以定义一个斜的立方体，让地板剪掉立方体，应该可以做到。于是继续定义json：

{
		name: '地板切坡',
		type: 'cube',
		width: 200,
		height: 20,
		depth: 260,
		translate: [-348,0,530],
		rotate: [Math.PI/180*3, 0, 0],
		op: '-',
		style: {
			…,
		}
	}

这里定义的一个倾斜的立方体，通过translate定义位置，通过rotate定义旋转角度，然后再通过op定义运算符，这里是“减去”，就用“-”。被剪掉的立方体也可以设置材质、纹理、贴图、颜色….等等。看看效果：

走廊桌

按要求走廊要放一个接待桌。为了简单就偷懒做一个立方体表示吧！这个简单，继续使用上述办法：

{
		name: '走廊板凳',
		type: 'cube',
		width: 300,
		height: 50,
		depth: 100,
		translate: [350, 0, -500],
	}

效果如下：

再增加一点配色并启动阴影效果后，看着就好多了。尽管只是个简单的立方体，但只要和整体风格一致，并不显得简陋。很3D里面最重视的就是效率，千万不要放一些很复杂的模型，尤其是这些非业务对象。

墙体

墙体是机房里很重要的一个部分，有好的光照、阴影的效果才能看起来更加逼真。由于墙体是不规则的路径，一段一段去生成还真挺麻烦的，还好引擎支持这种物体，甚至曲线路径都可以。这里只要在json里面定义一组数字的坐标，让这些数字依次连接，组成一个墙体，最后生成3D对象放入场景中就行啦。

json定义如下：

{
		name: '主墙体',
		type: 'path',
		width: 20,
		height: 200,
		translate: [-500, 0, -500],
		data:[
			[0, 0],
			[1000, 0],
			[1000, 500],
			[500, 500],
			[500, 1000],
			[0, 1000],
			[0,0],
		],
}

注意这里的类型变成了path，data中定义了一个二维坐标数组来描述墙体。由于墙都是从底面开始的，所以只定义它的平面的x、y坐标就行了。看看效果：

不如前文所说，还是需要上色、上阴影，才能有更好的效果。这里我们启用阴影并咨询设计师美眉几个颜色值，加上去，再看下效果：

还有细节：

门

看着雪白的墙，是不是觉得少了点什么？对，就是门。在3D机房的监控系统里，门禁是很重要的一块，客户要求门应该与实际位置相对应，并且要有开门关门的动画效果。这样，实际的门禁信息采集上来后，就能在界面实时看到门的状态了。

这里，考虑到门如果直接放上去，会被墙盖住；如果比墙厚，又难看不符合实际。还是应该先定义一个门洞立方体，把门所在的位置挖掉：

{
		name: '门洞',
		type: 'cube',
		width: 195,
		height: 170,
		depth: 30,
		op: '-',
		translate:[-350,2,500],
}

刚好挖在斜坡的位置，这样设备进屋就方便了：

不过这门没有一个门框，感觉不太生动。多一个门框会感觉立体感强一些。门框可以是一个比门洞略大的立方体，在挖门洞之前添加：

{
		name: '门框',
		type: 'cube',
		width: 205,
		height: 180,
		depth: 26,
		translate: [-350, 0, 500],
		op: '+',
	}

加上阴影和光线等综合效果，还不错，挺有档次的。

来张全景图看看：

接着，只要把门安上去就行了。门的定义比较简单，就是一个薄的立方体。不过为了做到玻璃效果，需要设置透明度，让它看上去更像一个玻璃，再让设计师美眉弄一张好看一点的门的图，贴上去。尽管有了webGL，复杂的建模工作可以省略了，不过设计师美眉的配合仍然很重要。

先做左边的门：

{
		name: '左门',
		type: 'cube',
		width: 93,
		height: 165,
		depth: 2,
		translate:[-397,4,500],
		style:{
			'm.transparent': true,
			'm.texture.image': 'images/door_left.png',					
		}

上面增加的style主要透明和贴图两项。看看效果：

同样的方法，再把右侧门贴上就搞定了。为了增加体验，也是用户的要求，门上面设置了动画：双击可以自动打开，再双击可以直接关闭。动画功能引擎做好了封装，在json中直接指定动画类型就行了。不过要注意左右门的动画旋转方向要相反，要不然一个向里开一个向外开感觉比较怪异。

窗

项目中，窗本身不需要有任何业务属性，但是美观度的要求可一点都不能少。方法和门类似，先放窗框后挖窗体。不过为了有点变化，这里不做窗框了，做一个窗台，方法和道理与门相同。

{
		name: '主窗户洞',
		type: 'cube',
		width: 420,
		height: 150,
		depth: 50, 
		translate: [200, 30, 500],
		op: '-',
	},{
		name: '主窗户台',
		type: 'cube',
		width: 420,
		height: 10,
		depth: 40, 
		translate: [200, 30, 510],
		op: '+',
	}

定义了一个窗洞（挖掉）、一个窗台（添加）。一个大窗户就做好了：

再添加一个略带颜色的透明玻璃。玻璃设置点高光和反射，增加“玻璃”感觉：

{
		name: '主窗户玻璃',
		type: 'cube',
		width: 420,
		height: 150,
		depth: 2,
		translate: [200, 30, 500],
		op: '+',
		style: {
			'm.transparent': true,
			'm.opacity':0.4,
			'm.color':'#58ACFA',
		},			
	}

Json中玻璃设置了透明度和颜色。这样一个半透明的茶色玻璃就好了：

到这里突然在想：盖房子如果像写程序一样简单就好了，所有的程序猿就不会是无房一族单身狗了。当然写程序和盖房子一样：该封装好的要封装好，最后就是搭积木组装就行了。如果盖房子都是从挖土活泥巴开始，那就杯具了。写程序也是一样，如果从webGL的main开始写……这3D机房的系统要几个月甚至几年才能做出来呢？

外侧墙

按照项目实际要求，继续增加更多建筑物墙体。主要是房间外侧有两道走廊隔墙。这是一个中间有大片透明玻璃的走廊隔墙，需要做的好看一点。由于是直线墙，没有复杂走向，直接用立方体定义得了：

{
		name: '左外墙',
		type: 'cube',
		width: 20,
		height: 200,
		depth: 1300,
		translate: [-790, 0, 0],
		op: '+',
}

效果如下：

再继续挖掉中间的窗户部分：

{
		name: '左外墙洞',
		type: 'cube',
		width: 30,
		height: 110,
		depth: 1300,
		translate: [-790, 60, 0],
		op: '-',
}

空白显得很奇怪，加上玻璃试试：

{
		name: '左外墙玻璃',
		type: 'cube',
		width: 4,
		height: 110,
		depth: 1300,
		translate: [-790, 60, 0],
		op: '+',
		style: {
			'm.transparent': true,
			'm.opacity':0.6,
		},
}

有了半透明和高光的效果，看起来就有质感了，右边也如法炮制：

这样，整个建筑的外观就基本完成了。最后，放一些绿植，增加些生气吧。

植物

做一盆植物，需要有一个空的花盆，花盆里面有泥土，上面有一株植物。这些东西用3D做起来都有点啰嗦。不过也不难。花盆用一个大圆柱剪掉中间的小圆柱，做成空心花盆；植物用贴图+透明模拟一下就行，不用真的去做植物的3D模型，否则要累死了。

根据上面的思路，在项目中通过仔细调整，把创建花盆的代码封装好，然后在json中定义花盆位置就行了。下面定义一个：

{
		name: '花1',
		type: 'plant',
		translate: [560, 0, 400],
}

程序中解析如果type是plant则创建植物对象并添加场景。

在房间、走廊、甚至窗台上都可以放几盆，窗台上的可以通过设置scale缩小一些，并提升其高度到窗台位置即可。

看看下整体效果，还不赖吧。

写了那么一大篇，才终于把3D机房的外观装修完成，咱也算是个设计师程序员的混合型人才了呢。其实机房最核心的资源——机柜，还没找落呢，没办法，形象工程也是项目建设的一大亮点。

机柜

机柜，以及其中的服务器设备。这才是3D机房里面最终要管理的内容。在我们的实际项目中，这些资产都是在数据库中存储，并通过json接口加载到浏览器中显示。这里为了演示方便，直接写几个机柜的片段，看一下显示效果。

机柜对象在项目中是这样封装的：用一个立方体来表示机柜，并加上贴图。项目中，为了提高显示速度，机柜一开始并不加载内部服务器内容，而是只显示自身一个立方体。当用户双击后，会触发一个延迟加载器，从服务器端加载机柜内部服务器，并加载到对应的位置上。此时，机柜会被挖空成一个空心的立方体，以便视觉上更像一个机柜。

定义机柜的json如下：

{
		name: '机柜',
		type: 'rack',
		lazy: true,
		width: 70,
		depth: 100,
		height: 220,
		translate: [-370, 0, -250],
		severity: CRITICAL,
	}

上面的机柜定义中，有一个lazy标记，标记它是否延迟加载其内容。如果延迟加载，则双击触发，否则程序显示时直接加载其内容。Severity是定义了机柜的告警信息，它是否有业务告警。如果有告警，会用一个气泡显示在机柜的上方，同时机柜也会被染色成告警对应的颜色。

加入更多的机柜看看效果：

设备

简单起见，这里管理的设备假设都是机架设备，尺寸规格比较规整，因此比较容易在机柜中组织。一个设备的外观确定后，在数据库中定义好模板，加载时根据其所在机柜的位置放置即可。

这里只是随机生成了几个服务器设备，并按位置摆放。在实际应用中，可以通过手工录入或者智能机架报送的信息来确定服务器的类型和位置。

如果需要监控到端口级别，还可以在服务器弹出后，再进一步延迟加载设备商的板卡、端口对象，并点击后进一步进行配置、监控等操作。当然加载的数据越细，对3D引擎和浏览器的压力会越大。可以通过动态延迟加载/卸载策略，获取一些平衡折中。

电视机

纯属无聊，再做一个电视机挂在墙上。依旧，定义一个立方体、挖空屏幕，放上透明玻璃，再贴上我们喜欢的电视节目画面，就ok了。

{
		name: '电视机体',
		type: 'cube',
		width: 150,
		height: 80,
		depth: 5,
		translate: [80, 100, 13],
		op: '+',		
	},{
		name: '电视机挖空',
		type: 'cube',
		width: 130,
		height: 75,
		depth: 5,
		translate: [80, 102.5, 17],
		op: '-',
	},{
		name: '电视机屏幕',
		type: 'cube',
		width: 130,
		height: 75,
		depth: 1,
		translate: [80, 102.5, 14.6],
		op: '+',
		style: {
			'front.m.texture.image': 'images/screen.jpg',
		},
	}

当然，实际项目中，也可以换上监控大屏幕的效果：

总结

整个场景写到最后，我也已经脑洞大开游刃有余了。3D场景，尤其是这类业务系统，并不一定要死抠模型的仿真度，才能做到“好看”的效果。先来一张全景看一下：

怎么样，还算精美吧？基本不输前面看到的广告公司的效果图。但和效果图一张死图片不一样，我们这是一个能操作、能漫游、能缩放、有动画、显示流畅、浏览器无需插件就能直接打开的3D机房小程序，就一个json文件和一百多行代码和一天的时间就搞定了，还是让人有点惊讶的。

不用插件、不用3Dmax，不用模型库，干干净净纯粹的小程序，手机和平板也能用哦，而且还很流畅！上一张我的Nexus5截图瞅瞅：

经过优化，场景加载已经控制在600毫秒以内，缩放漫游也很流畅。当然技术和美化永无止境，用户的需求也千变万化精益求精。但只要我们选择好了技术和工具，就能事半功倍。Html5就是极佳的一个选择。

Html5，也许它还不是银弹，但它确实是很好的一个炮弹。本文这一弹，你还喜欢吗？欢迎来信留言索取代码、技术交流： tw-service@servasoftware.com

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

HTML5游戏——只是趋势未到爆点

Mon, 01 Jun 2015 15:30:51 CST

HTML5 游戏是一个趋势，对现状而言，这仅是一个趋势。规则简单、进程快、时间短，成为 HTML5 游戏被迅速认可的主要原因。通过社交网络的分享，获取更广泛的传播，产品变成商业的逻辑正源于此。在资本市场的推波助澜后，留下的只有 HTML5 游戏从业者的迷惑——何时才是爆发点。

基于 HTML5 技术开发的《围住神经猫》在微信朋友圈疯狂转发的时候，从业者似乎看到了已故苹果 CEO 乔布斯所指引的方向已经到来——“没有人愿意使用 Flash，全球已经开始步入 HTML5 时代”。

作为生态链上的一环，HTML5 游戏引擎公司白鹭时代市场营销中心副总裁张翔最近在向外讲述这样一个利好消息：经纬创投王华东说非常看好 HTML5 游戏，这两年至少三五家公司能上市，300 亿的市场；程天总他说顺为也可能会拿出几亿美元投资 H5 领域。然而他同样明白，这个市场并非平稳发展。“从 2012 年开始就有很多人进入 H5 游戏行业，不过由于各方面的原因，HTML5 的发展受到很多阻碍。”

HTML5 的数据在一场行业会后被公开,HTML5 的游戏规模经过短短一年的发展，现在已有 1.2 亿左右的用户规模，据预测，今年用户将突破 1.71 亿。但这仍原远低于手机游戏用户的整体规模，腾讯互娱运营部总经理崔晓春在华为 2015 年分析师大会上表示，2015 年中国手机游戏用户超过 6 亿。此外，另一组数据也可以证实 HTML5 的虚火。日前一场行业会议上从业者披露，《愚公移山》月流水刚突破 200 万，《古龙群侠传》用户刚突破 200 万。这与动辄过千万，甚至过亿原生 App 手游相距甚远。

与 App 手游相比，HTML5 游戏更加依赖渠道，但却难以寻找到新的出路。南京泥巴怪创始人秦川表示，HTML5 可能接触到一些手游没有覆盖的人群，比如朋友圈的分享，工具类 APP 的游戏频道，或者浏览器的推荐，但已经形成规范运营和实际收入的渠道还是占少数。

HTML5 游戏难以从趋势转为产业的四点原因：

缺少明星产品带动产业健康发展

在朋友圈等社交网络迅速传播的 HTML5 游戏，能够称之为明星产品的少之又少。缺乏成功产品的带动，开发者的信心被打击，进而难以使得这类游戏产品迅速上量。

2014 年 7 月末一夜爆红的《围住神经猫》，因为设计符合移动端传播的规律，而游戏规则简化到只需用户点击，使得其迅速得以传播。然而同样是一夜之间，产品已经消失在用户的视野。在这之后虽然仍有一些小游戏在社交网络病毒式传播，但是难以被人记住，甚至更多有着浓厚的商业广告痕迹。即使有产品获得较好的成绩，如《寻找房祖名》2 日点击超 6000 万次、《愚公移山》月流水已达 100 万左右，但整个行业的最大问题仍是变现能力有限，这决定了 HTLM5 游戏市场的发展速度。

触控科技高级技术总监林顺表示，手游可以通过设置付费点，增值道具等一系列手段完成付费形成闭环，且通过日常运营来提高用户粘性和留存率，但 HTML5 游戏寿命短，用户利用碎片化时间进行即时游戏，热度通常不超过 7 天，一旦兴趣点转移，无需卸载变直接流失。

事实上，HTML5 游戏可以理解为移动端的网页游戏，这使得另一个影响产业健康发展的因素出现。类比 PC 端网页游戏即可发现，由于开发技术门槛较低，这使得山寨品开始出现。“神经猫”热度尚未衰减时，各类“围住 XXX”的山寨也开始出现在社交网络。神经猫的创造者秦川就估计：山寨神经猫大约分走了 500 万的访问量。同样为点击类操作的休闲游戏，开发类似《疯狂猜图》这样的 App 游戏尚需要 10 万元左右的成本，而《围住神经猫》的开发仅需要一个程序员、一个工程师合力开发一天的时间。

硬件和网络发展并未推动 HTML5 爆发

早在 2010 年，Zynga 收购了 HTML5 游戏引擎开发商 Dextrose，随后发布了第一款 HTML 游戏《Mafia Wars Atlantic City》，这带动了 Facebook、EA，甚至是迪士尼的跟进。然而，仅用了不到一年时间，这些崛起的 HTML5 游戏公司就开始纷纷宣告失败、倒闭。彼时失败的原因被归结于网络上无法支持、渲染技术本身不够成熟、没有合适的分发渠道等多种因素。《围住神经猫》制作人秦川日前向媒体表示，“归结起来就是天时地利人和。”

经历两年的基础设施积累，2014 年 10 月，W3C HTML 工作组正式发布了 HTML5 的推荐标准。与之同步的是，智能手机的性能升级，以及网络进入 4G 带来的高速带宽。但从现实来看，HTML5 却并未如预期的那样迅速爆发，甚至连 Web App 取代原生 App 的呼声也日渐稀薄。

秦川表示，“我头疼的问题，确实手机首先性能参层不齐，其次 H5 在原生基础上性能再差一层。”游戏发展从轻度游戏到重度游戏，这是技术发展，“我们可以做重度游戏，但是重度只能少数机器上跑，其实投产比低，所以我们尽可能适配大量的游戏，让很多人都可以玩这一款游戏。”

事实上，更有游戏开发者表示，目前 HTML5 的坑很多，比如在适配的过程中，不仅要满足高配置系统的运行，而且要满足低端智能手机使用者的体验。这样的问题在网络方面同样出现，因为并非所有用户都在使用 4G 网络，甚至在一些地区用户仍使用 2G 网络进行。

收入低导致行业普遍观望

尽管整个产业并不成熟，但对开发者来说，HTML5 游戏的快速开发和迅速发布，比起原生 App 要更容易切入市场，尤其是巨头林立的手游市场。DataEye《2014 年 Q4HTML5 游戏数据报告》显示，目前六成从业者已经投入或准备投入 HTML5 游戏，近 7 成 HTML5 游戏的用户集中在微信平台。不过，“HTML5 游戏的未来很美，但现在很苦。”掌趣科技联席 CEO 胡斌说，很多公司由于收入低的问题在观望。在他看来，如果能有三个月流水达 180 万的游戏出现，会吸引更多的 CP 切入尝试。

收入低的主要原因是 HTML5 游戏本身的特性。其主要以轻度游戏为主，虽然有一些厂商希望类似页游一样打造中重度游戏实现亿元级产品，但是后者的通道暂时没有打通，用户的碎片时间短暂，市场难以培育相应玩家。

但值得注意的是，一些轻度 HTML5 游戏正在朋友圈瞬间兴起，其本身并不具备更多游戏本身的特性，而是帮助企业营销而获取广告和开发收入。这类产品的出现，使得开发者可以通过流量实现广告变现，但其出现正在摧毁原本就很脆弱的 HTML5 良型生态。

资本关注技术多过游戏本身

市场应该看空 HTML5 游戏，原因是这只是资本在旺盛的手游热后，正在需找新的出路，真正吸引资本的实际上技术，而非游戏开发者。正如张翔所讲述的，资本正在关注这以市场。顺为已经计划支持至少 10 个以上 HTML5 团队，而王华东认为在两三年内有多家 HTML5 技术公司在国内外上市。但显然这些团队并非是单纯的游戏 CP。HTML5 游戏的开发者似乎也意识到问题的现状，《愚公移山》制作人陈陈表示，资本对 HTML5 CP 的关注度很高，但是钱不多。“一大波很汹涌把你淹没掉，但是你们公司没有做好准备。”

本文链接

自己的HTML5 播放器 - __constructor

Mon, 25 May 2015 16:23:00 CST

不知道写什么，主要也是自己水平实在是有限，想想自己会的东西都太基本，网上一搜往后不知道能数多少页，自己表达的也没有别人好。我希望自己写的东西要么是网上没有(可能性就是零……)，要么是带着自己的见解。所以没有素材，还是自己踏踏实实学习比较靠谱，看的书越多，发现自己不会的也越多，但是太长时间不发东西出来又害怕自己丢失了写文章的习惯，所以凑数也要凑一篇！

开头讲了这么多，就是做了铺垫，这个HTML5播放器很水……就是为了凑一篇博文素材加上这是我第一个上传到github上的项目……

github地址：https://github.com/westAnHui/HTML5-Player

功能很普遍，这玩意又不难，先看截图，如果觉得丑就不用看了0.0

本文不包含介绍HTML5播放器这方面的API，那个网上一搜一大摞……

注意：上一个(左箭头)，下一个(右箭头)、全屏还没写，未完成版……原谅我偷懒先放出来了，其他功能基本上都实现了

——————————————————————————————————————————————————————————————

很简单，几个基本的按钮，悬停按钮时发光用了border-radius和box-shadow配合，总进度条和音量进度条使用自定义拖拽

也有几点收获

比如：

box-sizing:border-box是真心的好用啊，特别对于有些在父级宽高未知，子元素需要填满，不过子元素自身有border和padding，这样无脑width或height设置为100%，那就超了~但是加上box-sizing:border-box世界就清静了~

transform:translate(-50%, -50%)，这个也是棒的不行，偏移的50%是针对子元素本身的，不需要知道自己的宽高数值就可以。配合top:50%，left:50%，position:absolute立马达到垂直居中！，相比较margin:-(需要知道自己本身宽高再除2)%，方便了很多！

js是写在window.onload里面的

注意：如果不用window.onload，在DOM加载完毕之后直接跑的话，是读不到总视频时间的

video.duration的结果是undefined

视频和图片是一个性质嘛~无聊测试了一下本机环境下延迟40ms就可以读了，不过这毫无用处……

最后给个GIF

本文链接：自己的HTML5 播放器，转载请注明。

技术干货分享：如何选择 HTML5 游戏引擎

Wed, 27 Apr 2016 11:33:46 CST

原生手游市场已是红海，腾讯、网易等寡头独霸天下，H5游戏市场或将成为下一个风口。据笔者所知，很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适合团队和项目的引擎，笔者通过学习和项目实践，总结微薄经验，供大家参考，非技术人员也可以将本篇内容作为引擎选择的重要关注点。

选择H5游戏引擎的思考维度
1、开发语言的支持
2、2D、3D、VR的支持
3、性能
4、引擎的应用广度
5、设计理念
6、工作流支持力度
7、商业化成熟案例
8、学习资源与技术支持能力

首先，我们要知道，当前主流的游戏引擎有哪些。由于H5引擎有很多，笔者在这里进行了精心的筛选，过滤掉不支持webGL的引擎，以及封装了第三方渲染内核的JS框架，和不能直接在浏览器中运行的JS引擎。

为什么要过滤掉这几种呢，首先，没有自己的渲染内核，仅仅是基于第三方的内核作的API封装，笔者很担心可持续的性能优化和维护能力。另外，不能在浏览器中直接运行的JS引擎，将限制H5游戏跨平台的交互能力。还有，笔者非常看好webGL模式，认为webGL模式才是H5引擎的未来。原因有几点：

第一、性能，webGL模式远超Canvas数倍。DOM模式就不适合用于真正的游戏开发，更不用提。
第二、3D方向，webGL模式理论上可以制作2D和3D游戏，Canvas和DOM模式下只能制作2D游戏。
第三、普及率，webGL的普及率已经非常高了，尤其是支持webGL的腾讯TBS-Blink内核已在4月19日发布，并逐步在微信、QQ空间、QQ浏览器、手机QQ等APP中采用静默安装方式全面升级。这个普及率在国内带来的影响，;你懂的……

1、选择H5游戏开发语言

拥有广泛开发者的H5游戏开发语言共有三种，分别为Flash AS3、TypeScript、JavaScript。其中Flash AS3、TypeScript均属于面向对象的高级脚本语言，通过编译器将原项目代码编译成JavaScript代码文件运行于浏览器之中，面向对象的高级语言无论是项目开发管理，还是项目开发的工具环境的成熟度都明显优于JavaScript脚本语言，尤其是中大型项目方面，AS3等高级语言的效率会更高。

从上图看出，支持JavaScript语言的引擎更多，由于AS3语言的编译器为Layabox引擎推出的，因此采用AS3作为开发语言的仅有Layabox引擎。笔者建议在开发中大型游戏项目的时候，采用TypeScript或者是Flash AS3语言进行开发。如果是小型游戏，任选其一即可。

2、引擎的未来延续能力

选择一个引擎，并不是简单的认为，满足眼前够用就可以了，引擎的未来延续能力也是很重要的，这个项目是2D，下个项目想开发3D，如果引擎不支持怎么办？去换个引擎？如果VR的机会来了，再想发布VR版本，这个引擎不支持，需要重新开发吗？等等问题，作为开发者尽可能要提前想好。

通过上图，可以看出，即便是在支持webGL的H5引擎里，有只面向2D游戏的，也有只面向3D游戏的，同时支持2D、3D、VR的H5引擎，从目前看只有Layabox与Egret引擎。

3、性能是核心需求

性能是H5游戏面临的核心门槛，也是很多H5游戏不被专业玩家认可的重要原因之一。游戏卡顿，不流畅，这样的产品体验很难在激烈竞争中生存下来。

H5产业早期的普及阶段即将过去，游戏品质在迅速提高，品质中包括精细的美术和炫酷的动画等。在复杂的游戏项目面前，上述种种元素，其流畅体验度对游戏引擎是极大的考验。所以选择性能优秀的引擎是保证品质的最重要基础，一定要谨慎。

在游戏项目研发开始时，一定要先对复杂的模块做DEMO测试，特别是带背景滚动的游戏。比如横屏卷轴游戏，对帧数稳定性要求极高，如果满足不了性能上的需求，可能会带来眩晕、眼花、疲倦等不良体验。

在webGL的2D渲染性能方面，pixi.js的性能处于当前的顶级。在webGL的3D渲染性能方面，Three.js非常优秀。在runtime方面Cocos2d-js也有着原生级的表现，经过对比，笔者认为Layabox性能的综合实力最强，在各个渲染领域都保持在HTML5引擎的顶级水平。当然，上图仅作为参考，对于任何号称某个引擎性能最牛的论调，一定要亲自进行性能DEMO的测试对比，而不要轻易采信。

由于性能是游戏最核心的需求，笔者这里再多说一句，大型项目在系统复杂度、UI复杂度、动画显示数量和种类等方面与小型游戏项目完全不在一个量级。会涉及到比小游戏更复杂的性能优化、内存管理、资源管理等需求，如果选择了小马拉大车的低性能引擎，项目夭折可能性非常大，除非最后项目开发者花大量时间自己优化引擎。所以性能差一点，就会导致结果差很多，不可主观想象。

4、与引擎的应用广度

随着H5游戏品质提升，在其他领域也具备一定的竞争力和价值，一次开发可发行各个领域版本，已成为日渐明确的需求，这里面包括发行原生APP手游和PC的flash页游需求，大统一的引擎时代即将来领。目前最火爆的H5游戏《传奇世界H5》据说有40%的收入来自PC网页。

发布PC页游时，由于PC浏览器目前对HTML5兼容性不足70%，用户损耗很大，页游联运平台可能会拒绝或放量很少，只有采用能同时发布Flash版本的引擎，才能解决这个问题。

5、设计理念与定位

设计理念是个比较大的话题，也是个很重要的引擎选择因素，比如引擎是要专注移动端，还是要面向全平台多端游戏市场。是注重性能，还是注重工具链等等。深入了解不同引擎的理念与定位，才能更好的与游戏产品进行结合。

上图内容仅作参考，详情建议去各引擎官网深入了解。

6、工作流支持力度

作为商业级开源引擎，工具链的提供与支持也是一种选择考量要素，比如UI编辑器、粒子编辑器、骨骼编辑器、场景编辑器等等，如果引擎方直接提供或支持，那么将会较大的提升研发效率。
本文中提到的7个引擎，只有Egret、Layabox、Cocos2d-JS这三个引擎，在工具链方面提供足够全面的支撑。

7、是否有成熟的商业案例

怎么证明引擎是成熟的？一定要有成熟的商业案例，一般引擎的官网上都会有游戏案例介绍，我们在选择引擎之前要进行深入体验，包括：商业案例的数量、商业案例的种类、稳定性、流畅度（要在低端机里体验）、项目复杂度、项目相似度等。如果有一些大型成功案例背书会相对安全可靠些。
从目前的行业案例来看，Layabox引擎的MMORPG《醉西游》、重度动作游戏《猎刃2》、大型模拟经营游戏《梦幻家园》等无疑是H5引擎技术的最高水准代表作。但是从卡牌、挂机等类型的付费游戏总体数量来看，Egret引擎明显占优，充分说明该引擎的市场宣传力度更胜一筹。

8、学习资源与技术支持能力

能提供什么样的学习资源，以及技术支持，对于开发者也是重要因素，如果你是技术大牛，只想使用轻量的第三方渲染内核。那么2D游戏，pixi.js无疑是首选。3D游戏，笔者推荐Three.js。但是这两种引擎的学习资料都比较稀少。笔者认为学习资料的完善，以及在学习过程中的技术支持力度，将会很大的帮助你解决引擎使用中的问题。所以，API完善，DEMO完善，文档完善，社区的响应速度，交流氛围，以及QQ技术支持等，都可以作为你选择引擎的因素考量之一。

9、页游移植产品的引擎选择

目前像《醉西游》等优秀H5产品是Flash页游或手游移植而成，移植类的产品在选用引擎时要注意，代码是否可以直接移植？如果可以，那将节省大量的开发成本。比如Flash AS3开发的2D或3D页游或手游，可以把逻辑与算法代码直接拷贝移植到Layabox引擎项目中，开发速度提高数倍。

写在最后：最后提醒一下，千万不要相信某些引擎的单方宣传，一定要花一点时间去研究实践，亲自制作DEMO去作一作对比，动手体验到的才是真理。

针对DEMO测试笔者有几点建议：

1、采用一个复杂的UI，特别是复杂列表，比如说没有分页的背包列表，背包里放上不同的道具图片，测试滑动时的流畅度，这块比较考验性能，元素越复杂，数据越多，尤其能对比出来性能上的差异。

2、包含最复杂战斗部分，不要写战斗逻辑代码，不然会花的时间太长，只需要把战斗相关的动画和复杂的元素放在场景中模拟即可，因为H5游戏性能瓶颈通常在于画面的显示。

3、测试主要目的是看项目在引擎中性能，这是最至关重要的，所以，硬件上，我们要选择低端安卓手机（比如红米）进行测试。软件环境建议使用微信环境测试，首先，因为微信公众号是H5的主要渠道之一，其次，微信当前的H5性能低于chrome浏览器，在恶劣的环境下更能测试引擎的优劣。

文章来源：游戏大观

玩转HTML5移动页面（动效篇）

Tue, 28 Apr 2015 10:32:55 CST

作为一名前端，在拿到设计稿时你有两种选择：

1.快速输出静态页面

2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来

作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？

这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。

同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为 动效篇和 优化篇。

====前方高能====

（1） CSS3时序错开渐显动画

这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。

例子（忽略兼容前缀和无关属性）：

效果就是两个元素分别从上面掉下来，这里有个小细节（keyframes），为了让掉下来的动画生动点，应该是在90%的时候先掉下一点点，然后瞬间在100%时回跳5px。

还有个细节，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是渐变动画不能停止在最后一帧。有这样一个解决方案：

1.用 Modernizr去检测是否支持这个属性，加上识别类.no-animation-fill-mode；

2.根据识别类采取以下措施：
（1）用js模拟同样效果；
（2）用css屏蔽掉动画；
（3）或者直接全部都用transition来做（不要keyframes）。

示例页面如下（查看DEMO）：

（2） CSS3细节强调动画

一些局部细节如果还是渐现显示，会枯燥没什么感觉，例如标题、按钮等，需要一种强调。

分两种情况：

1.如果时间允许的话，基本做法是先把一个元素切成不同的块状，例如小人的手脚都切成不同图片，然后让它们重新组合，再通过赋予不同的CSS动画来让它生动起来，这里引用个webank的例子：

（查看DEMO）

2.如果时间紧凑，又不像桑尼一样擅长于动画细节，可以使用一些辅助工具：

Animate.css，通过直接预览选择想要的动效，然后下载它的CSS把对应的keyframe扒下来就好了（引用整个CSS是资源浪费）。

（3）SVG动画

SVG技术越来越不陌生，使用门槛也渐渐降低，而且SVG动画还可以使用CSS控制。

先看个生日页面，是个SVG的蛋糕：

（查看DEMO）

可见SVG是很强大的！弥补了CSS3的不足。

然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3比较难实现，这里可以用SVG，看图：

介绍一个PS插件 svgArtisan（目前还未有主页），这个工具可以直接根据PSD的路径图层生成SVG图形。

接下来就简单了，将设计稿上的路径图形用插件生成对应的SVG，例如是这样的：

（注意，其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。）

再使用CSS3的animation控制stroke-dashoffset：

效果不难吧！SVG还有各种用途，例如制作ICONFONT等，可以深入挖掘。

（4）重力陀螺仪

想让页面更有层次感，不妨让设计提供一些碎片元素，例如彩花，星星之类，然后把它们单独切出来放画面前景，使用陀螺仪伴随着手机运动碎片也跟着运动，多么好玩！

这里提供一个工具可以轻松实现陀螺仪重力效果的： parallax.js

用法简单，定义一个parallax-obj的父类，把需要动的元素加上layer的类，然后设置动的范围data-depth：

（5）背景音乐&音效

H5页面要炫酷，画面生动还是不够的，一定要配合生动的音乐。因此可以主动跟设计或产品沟通，让他们可以提供音乐资源，分分钟导致UV猛涨有木有！

当然，有了音乐，前端也不是直接引用的，还是有点要求：

1.音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐效果，方便循环播放；

2.音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。

一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降低它的比特率和声道来改变体积。

接着，只需要简单引用：

这里有个问题，IOS是不能自动播放音乐的，一定要触发一个用户交互事件，例如点击。

但是有一种hack的方法可以让IOS微信侧页面自动播放（SAFARI依旧无效）：

通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom结构，相当于执行了一次交互。（有人也用过createEvent模拟，原理也是动了dom。）

因此，记得暴露一个音乐关闭/打开的按钮，不然肯定被用户骂死。

（6）有趣的loading

Loading页还是要有的，万一用户网速慢呢？

以上做了那么多事，如果没有资源加载都是玩不来的，因此还需要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。

然而loading还是可以做得很有趣的，一般的做法是：

1.引入品牌，例如APP宣传页；

2.引入有趣动画，放一个贱贱的人物跳舞给你看；

3.一切从简，用CSS3简单动画。

====最后总结====

最后，给一个例子结尾吧。

这是空间5.0预约页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，首屏星球重力感应，音乐（这里使用开启按钮后播放）等等。

（由于活动已结束，很多运营处都被删掉从简了，忽略那些细节）

（查看DEMO）

当然，真正要做到高效制作动态H5页面，还是靠积累，因此平时做好的细节动画自己都积累起来，下次分分钟就能用得上。

请继续阅读《玩转HTML5移动页面（优化篇）》。

玩转HTML5移动APP页面（优化篇）

Tue, 28 Apr 2015 12:10:42 CST

承接上文《玩转HTML5移动APP页面（动效篇）》，上次说的是让页面动起来的一些小技巧。
而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。

====前方高能====

（1）动画雪碧图

涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！
网上的工具有一些可以帮助你生成雪碧图的工具，例如 CssGaga， GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。
特别地，如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成2-4张，因为现代浏览器都支持4-6个同源请求下载，若资源实在太多，也可以考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好，当然，这需要具体情况去衡量。

顺便提一下，我写动画的一个小技巧是把每一页的动画分在一个import.css里面，然后最后在主样式中import进去，这样方便调试动画，也容易维护，例如：

//style.css
@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");

当然，import不是原生支持的，这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。

（2）图片压缩

图片压缩是老生常谈，但是仍然有不少人忘记压缩，那可是活生生的带宽和流量的浪费啊…

压缩图片需要有好工具，有智图， TinyPNG， JPEGmini等等。

依靠工具外，还有以下方式可以优化图片：

1.尽量避免用PNG24。如果图片色彩要求不高，请使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到来，在不用考虑兼容的情况下请大胆尝试；
3.用SVG和ICONFONT代替简单的图标；
4.用FUFU的字蛛来代替艺术字体切图。

（3）多终端兼容

多终端兼容是一切的根基，要知道有人拿着肾6+，有人拿着肾4，大则414×736，小则320×416（IPHONE4在SAFARI保留上下端导航），因此多终端兼容是十分必要的。
曾经有一种派系为320派系，就是大部分页面都是320宽度，因此干脆直接用320的容器来包一切页面，那样也简单，然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。

那么到底要如何兼容呢？
这里我分了三个时期来说说：
A.设计初期。先审视设计稿，因为320派系的原因，大部分设计稿只考虑到IPHONE5来设计，因此很多背景元素是只有320px宽度（页面实际渲染宽度），例如下图。

那么，这时候就需要设计提供一个较长的延伸背景了，最好是可以重复的，用background-repeat可以减少图片大小。

B.设计中期。也就是具体的兼容方法，可以使用CSS3 Media Query和类覆盖。

1.CSS3 Media Query，按范围兼容机型。

/*iphone6*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.page6 .ele-building{top: 69px;}
.page6 .ele-runner{top: 100px;}
.page6 .ele-pophome{top: 16px;}
}

2.类覆盖，这种方式适合直接为小屏或大屏做整体兼容。
首先，为小屏（大屏）加一个识别类，这里小于420表示为小屏幕（IPHONE4有上下导航栏）：

var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh&lt;420){
$('body').addClass('low-screen');
}

然后，对应识别类加上要变动的元素覆盖，例如：

.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}

C.设计后期。这是最后一步，整体检查和体验，这里面会暴露一些问题，例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了，可以来最后大招解决：

1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素，实测失真根本看不出来，设计师也满意（毕竟不用多做一张图！）；
2.小屏适当去掉一些元素，例如一些翻页提示，一些多余图标，可以让优雅降级，把它们 display:none掉。

有以上几步，基本就能兼容大部分机器了。兼容一直是个苦活，但是这是前端必修课，多练就会发觉其实也没有那么难嘛。

（4）交互提示

前面说了，加了音效就要加上音乐切换开关的按钮，不然会被用户骂死。还有其他，例如如果你的页面不能兼容横屏，请监听横屏状态，然后加上适当的横屏提示。

例如：

// 横屏监听
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验，请将手机/平板竖过来！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;

提示越多，界面越友好，有时候设计师会漏掉一些可能出现的页面情况。
作为有态度的前端，请好好把关，让用户有好的体验。

（5）分享接口

H5做好了，要传播分享才能展示你的牛逼轰轰。
然而分享其实是个坑，分享到微信、手Q等都有各种问题。

A.微信

旧微信会使用WeixinJSBridge来声明分享的缩略图、标题、正文等，比较方便。例如：

而最新的微信提供了新的微信SDK，需要在公众账号绑定所属域名之后调用SDK作分享，可以说分享功能会更加强大，坑也会更加少。

B.手Q

手Q支持声明meta标签的的分享方式，例如：

而若在qq.com域名下也支持api的定义方式。

C.一般化分享

在默认兼容旧版微信、手Q或者各种浏览器，平台，可以用这样的方法：
写h1做标题，p做内容，img做缩略图，只需要把h1隐藏掉就好，这里的缩略图最好要大于200x200px。

例如：

当然，这样也有利于搜索引擎拉取信息。

分享的坑还有更多，例如不同浏览器例如QQ浏览器、Chrome也会有自己的默认拉取方式（部分截图作缩略图），需要多加测试优化。

（5）SEO搜索引擎优化

SEO（搜索引擎优化）的基本做法是把页面结构写好，这包括：

1.定义精确的网页标题。你的标题应该有概括性，能明确告知搜索引擎和用户你的网站大概内容和目的，可以是当前页面标题-所属类型-产品名，例如“全民来猜歌-年费黄钻-QQ空间”。

2.针对页面内容补充description和keywords的meta标签。你需要简短总结页面的主要目标，然后补充description，以及根据关键词补充keywords。

3.优化你的超链接和图片。包括优化超链接显示的文本，要具有语义性也要跟超链接的网页具有相关性，例如“空间主页”就不要链接到“www.qq.com”。同时，要补充”title”和”alt”属性，例如“<img src=’images/apple.jpg’ title=’苹果示例图’ alt=’苹果示例图’ />”。

4.建立良好的网站导航和sitemap。网站需要有一个良好的导航，控制根目录和各子目录的关键，通过sitemap可以帮助网站主了解网站结构，也方便搜索引擎收录整个站点。

5.优化目录结构和URL。你的URL应该有语义性，简短易懂，例如http://www.apple.com/macbook-air/，而且每一层级都要有它对应的页面展示以及语义。

6.善用h1-h6的标题结构树。合理的标题可以强调文字，也能让搜索引擎更加了解到各标题的重要性，因此建立良好的标题树十分有意义。

7.不断致力于提供优质的内容。社交化分享是网站曝光最快的因素，因此不断提供了优质原创内容才能真正提高你的网站曝光权重。

（6）无障碍

无障碍的普及是一件好事，这让互联网真正地为所有人可用。因此我们也应该为之而努力，无障碍的根基是你页面强壮的语义性和结构性，具体可以参考《腾讯网无障碍说明》了解无障碍的优化手段。

最后，罗嗦了这么多，只是我自己的一些小经验，请轻拍砖，多交流。

腾讯ISUX ( http://isux.tencent.com/play-with-html5-optimize.html)

中国和美国的HTML5市场差距有多少？

Thu, 22 Oct 2015 18:47:00 CST

【编者按】本文作者APICloud 创始人兼CEO刘鑫。

近日，我在旧金山和美国的HTML5开发者进行了一次近距离的接触，感受中美HTML5开发者的热度差别和不同市场阶段的中美表现巨大差异。

中国和美国的HTML5市场差距有多少？

首先，从下面两张趋势图我们很容易发现美国的HTML5公众关注度是从2009年底出现第一次的快速上涨，而将近2年后2011年下半年，中国的HTML5市场才出现了第一次的集中关注。

美国HTML5市场经过5年的长期发展之后，早进入理性的状态，不是炒作概念或者单纯的市场宣讲活动，甚至关注度出现了下降，已经变成了在web技术各个独立领域深度探索和创新。而中国HTML5市场在2015年的此刻虽然关注度火热，但是可能比美国市场出现了更进一步的延后。

图1:HTML5在美国的关注度数年的趋势

图2:HTML5在中国的关注度趋势

美国HTML5开发者和公司在做什么？

1、先总结：从创新到实用

此次见到了很多很“cool”的公司，其中有一家公司利用WebGL和Websocket技术，将一个方程式赛车场搬到了互联网上。

他们是这样做的，首先赛车上被安装的上千个传感器可以实时数据回传，通过Websocket技术和HTML5的结合在PC上做实时的跟踪模拟展示，并且可以以3D的形式呈现。这种方式的实现，除了感觉震撼，也让我感受到一个真正的程序员在创新和技术深度使用上所下的功夫。并且通过这种努力让创新的想法得以变成现实。虚拟现实、IoT物联网、3D是美国HTML5开发者目前所关注的焦点。

2、美国的HTML5和移动

对于把Web App网页加壳直接打包成成一个iOS和Android App的模式，美国的开发者基本不再更多地提及。

通过和美国网页开发者的交流，我发现经过5、6年的发展，大家对于写一套代码可以直接在PC、手机浏览器、加壳成App（当然在中国还多了一个微信的发布渠道）这种模式的认识已经比较成熟，普遍认为这种理想主义状态下的模式并不能带来真正的用户体验。

他们对于纯前端框架的使用也比较谨慎。比如有一个开发者告诉我，因为Angular.js在重写 2.0并且会在1.0的版本上彻底重构，因此在很多美国开发者现在不会选择至少到新版本的发布。这段对话最重要的价值是让我明白美国HTML5开发者的成熟和理性。

因此，美国HTML5开发者在移动上也并不会抱着偷懒的心态写一套代码，希望在PC、手机等全部通用。这也能解释为什么Sencha等这种前端框架发展不愠不火的现状。

3、在美国开发者的眼中，React JS/Native是什么样的？

让我出乎意外的是，React Native在此次美国交流中并没有那么火热。

我原以为，Facebook刚刚发布React Native会让美国开发者热情高涨。大家都很关注，但是只能说没那么让人激动。我和一个开发者沟通了对于ReactJS和React Native的经验，他告诉我，React JS更多被用在了PC端，而移动端使用React Native对于一般的前端工程师来说也并不简单。很多大公司非常高级的前端程序员会追求新技术，并且尝试使用。

另外，他们也相信，有Facebook站在后面背书会持续发展，但是对于大多数前端HTML5开发者来说还是太复杂了。因为使用React Native对前端程序员的要求不是单纯的Web技术，同样需要原生的开发经验和能力，想作出真正好用的App，可能需要的不仅仅是尝新的兴趣，更需要有多种技术跨领域使用的能力，否则只能当成程序员的一种学习。并且关于React在美国HTML5开发者中也存在着巨大的Hype（争议）。我总结此次交流，发现React的发展仍旧任重道远。

美国开发者眼中，React Native很酷，使用React Native主要用来解决移动端App的UI界面布局和交互的问题，App其他功能的实现需要开发团队独立解决。

但是，眼下存在的问题是，JavaScript开发者需要了解Native App技术，而Native App开发者需要精通JavaScript才能基于React Native开发App，这似乎有点矛盾。

其次，iOS与Android有组件代码可以重用，但是部分会存在区别。

最后，React Native开发需要彻底的搭建原生App开发环境支持，这对于很多开发者来说尤其是网页开发者来说也过于复杂了。

站在美国看中国HTML5市场

从概念到实用，这是和美国HTML5开发者交流最深刻的感受。反观中国HTML5开发者市场，我们需要的是沉淀而不是简单地追求热点。

对此我也进行了一些深入思考，结合此次的美国开发者交流活动，我发现很多思考和观点也得到了验证。

比如，响应式设计虽然能够带来一些在多终端开发的便利性，但是更多的还是被用在以PC网站为主体的业务上（也就是对于大部分用户仍旧使用PC端访问的服务），很多前端框架被用在改造老旧网站或者说遗产型网站上（Website as a legacy），这是为了保证这些老旧网站也可以被越来越多的移动端用户能访问（就好像云适配在中国所做的事情，一行代码将PC网站变成手机网站）。

但是，对于纯粹的移动端业务，PC和Mobile更多被独立地开发和认真对待。一套代码在手机浏览器、在微信公用号甚至变成App多个场景应用的模式在美国这个成熟的HTML5市场并不是主流。

这个观点，我想也能够很好地说明——

中国HTML5开发市场，还需要挤掉炒作的泡沫和市场的误导。

在这几天和美国开发者的深度交流中，我感受美国市场虽然也在不停地谈创新，但是并没有太多空的概念和炒作。这种氛围也造就了一批相当有实力的前端程序员，甚至full stack全栈程序员。

市场会发展，他相信中国的HTML5在未来2年也会进入理性成熟阶段，中国也会有更多有实力、有创新能力的HTML5甚至全栈程序员出现。当然这首先需要的还是中国HTML5前端程序员们深度的积累和踏实不盲目追逐热点的心态。

最后，附上我们在旧金山的现场：

【作者介绍】刘鑫，APICloud移动应用云服务创始人兼CEO。见证了中国移动互联网从SP梦网到智能机时代的全过程。专注于国内外移动应用开发平台领域的研究，系统的阐述过Web App的挑战与Hybrid App的发展。

Html5 客户端存储安全

Sat, 12 Dec 2015 12:27:57 CST

HTML 5 在客户端存储上的内容更丰富，更强大了，比如cookie只能存4k的内容，而HTML5标准里，可以存数十M都没有问题。

在未来可能很多隐私数据都会保存在客户端，这其实也提高了风险。

在html5中的客户端存储有3个

Session Storage
Local Storage(ex Global Storage)
Database Storage

做了点小笔记。

和cookie类似，在新的html 5中使用的是 Session Storage，不过它的生效时间不再由程序员指定了。

Session Storage没有path字段，所以相对cookie能针对某个目录的设计而言，这种设计在安全上反而是削弱了。

Global Storage 比较危险，属于全局保存的数据，能跨全域，不过目前ff2 ff3和ie8都严格限制了这一点。

database storage目前还只有webkit支持，用的是sqlite。

未来FF和IE肯定也会加入对它的支持，不知道会不会也用sqlite。

如果使用了Database storage，那就还会存在客户端注射的风险。

一般情况下，需要知道字段名才能去操作，不过paper的作者提出可以用遍历的方法来获取字段名，类似遍历：window.sessionStorage

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

Wed, 24 Jun 2015 12:13:19 CST

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行。

有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然后，选择一个合适的游戏引擎是一个不小的挑战，它有时能帮你完成项目或突破项目瓶颈。

为了让你的选择变的容易，我们已经通过分析大多数JavaScript 3D游戏引擎在今天的市场并列出了十大游戏引擎来帮助您用JavaScript创建非常棒的HTML5,WebGL游戏。

1. Babylon.js

毫无疑问，Babylon.JS是最好的JavaScript3D游戏引擎，它能创建可以出售的专业级游戏。
Babylon.JS是David Catuhe对3D游戏引擎热爱的结果，他在用DirectX, OpenGL, 和Silverlight创建3D游戏引擎方面是经验丰富，并最终自己完成了一个游戏引擎。
Babylon.js的一些核心功能包含了场景图与灯光、摄像机、材料和网格、碰撞引擎、物理引擎、音频引擎和优化引擎。
这是一个 Babylon.js试验场，你可以拿你手边的游戏来试试这个游戏引擎。

2.Three.js

Three.js是另一个广泛应用并且功能强大的JavaScript 3D库，从创建简单的3D动画到创建交互的3D游戏，它都能实现。
Threejs带来的不仅是支持WebGL渲染，也支持SVG、Canvas和CSS3D渲染。然而，从游戏的角度来看，你可以只关注Threejs的WebGL渲染。
获取Three.js 3D引擎的源代码— github

3. Turbulenz

Turbulenz是最好的游戏引擎之一，在2009年，当HTML5和WebGL还在酝酿时，它已经被推出。直到2013年，Turbulenz才基于MIT协议拥抱开源。
Turbulenz包含了很多功能，例如2d物理、3d物理、声音、视频和其他服务,如排行榜、multichat,支付和用户数据。
了解更多： biz.turbulenz.com
获取源代码： turbulenz_engine

4. Famo.us

在HTML5 3D发展的市场中，Famo.us占据了非常重要的地位，并且它是最好的JavaScript 3D开源框架之一。对于famo.us，最好的事情就是包装了3D布局引擎，其完全继承了3D物理驱动的动画引擎。
了解更多— famo.us/docs
获取源代码— famous

5. PlayCanvas.js

PlayCanvas是一个基于 WebGL游戏引擎的企业级开源JavaScript框架，它有许多的开发工具能帮你快速创建3D游戏。PlayCanvas.js由一个专业社区创建，最初并不是开源的，但现在你可以在github上fork PlayCanvas.js，然后在你的下一个3D游戏项目中免费使用。
它还提供了能在浏览器中云心的云编辑器，开始使用PalyCanvas和导航到编辑器的URL一样容易。
了解更多— playcanvas.com
获取源代码— playcanvas/engine

6. Goo Engine

来自于GOO技术家族，Goo引擎有一组功能强大的JavaScript API，可通过使用HTML5和WebGL创建任何3D事物。有一个在线的编辑器goocreate，可以运行在Goo引擎上，并封装了一些功能，例如视觉三维编辑器,材质编辑器、脚本和容易发布选项等。
你可以通过支付一些相关的许可费用，在浏览器中使用在线编辑器。
尽管编辑器需要一些费用，但是Goo引擎是绝对免费的，你可以下载它并在你的3D项目中使用。
了解更多—- labs.gooengine.com
获取源代码— code.gooengine.com

7. CooperLicht

对于创建基于浏览器的游戏，CopperLIcht是最出色的3D引擎之一，也是CopperCube 3D游戏编辑器的后端引擎。
CopperCube是一个支持创建3D游戏和动画所需要的所有功能的编辑器，但是，它并不开源，需要一些相关的许可费用。
了解更多— ambiera.com/copperlicht

8. Voxel.JS

Voxel.Js是开源的，基于JavaScript的一个3D游戏引擎，自从它发布以来，社区成长非常快。如果你喜欢模块化方法，Voxel是一个不错的选择。
Voxel-engine是创建3D游戏的核心模块，其它模块可以根据需要插入。到目前为止，已经有超过200个扩展在npm上发布。
了解更多— maxogden/voxel-engine

9. Blend4Web

在2014年，Blend4Web作为开源的3D框架而发布，它高度集成了Triumph的3D内容创建工具“Blender”，并且本地支持Blender的节点材料、粒子系统、bullet物理引擎和其他功能。
获取源代码— blend4web.com/en/downloads

10. Enchant.js

Enchant.js是一个模块化的、面向对象的JavaScript框架，可用HTML5创建简单的APP和游戏。它是基于MIT协议开源的，因此开源免费使用。3D动画和游戏开源使用额外的插件（基于WebGL）创建。
获取源代码– wise9/enchant.js

本文根据@Nicolas Bevacqua的《best-3d-javascript-game-engines-frameworks-webgl-html5》所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://noeticforce.com/best-3d-javascript-game-engines-frameworks-webgl-html5

淡忘~浅思猜你喜欢
怎么对HTML 5的特性做检测？	HTML 5：绘制旋转的太极图	【译】利用HTML 5中的Menu和Menuitem元素快速创建菜单	初识HTML 5：关于它的三个三	HTML 5 API的”前生今世”
无觅

转载请注明：淡忘~浅思 » 【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

一些有用的HTML5 pattern

Thu, 18 Jun 2015 21:42:17 CST

最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用 type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下 pattern这个属性。

type="tel" 和 type="number" 的区别

这里还是先那么先交代一下最初遇到的问题。其实无论是 tel还是 number都不是完美的：

type="tel"

优点是iOS和Android的键盘表现都差不多
缺点是那些字母好多余，虽然我没有强迫症但还是感觉怪怪的啊。

type="number"

优点是Android下实现的一个真正的数字键盘
缺点一：iOS下不是九宫格键盘，输入不方便
缺点二：旧版Android（包括微信所用的X5内核）在输入框后面会有超级 鸡肋的小尾巴，好在Android 4.4.4以后给去掉了。

不过对于缺点二，我们可以用webkit私有的伪元素给fix掉：

  input[type=number]::-webkit-inner-spin-button,  
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
    }

pattern属性

pattern用于验证表单输入的内容，通常HTML5的 type属性，比如 email、 tel、 number、 data类、 url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。

显而易见， pattern的属性值要用正则表达式。

实例

简单的数字验证

数字的验证有两个：

  <input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">

对表单验证来说，这两个正则的作用是一样的，表现的话差异就很大：

iOS中， 只有 [0-9]\*才可以调起九宫格数字键盘， \d 无效
Android 4.4以下(包括X5内核)，两者都调起数字键盘；
Android 4.4.4以上，只认 type 属性，也就是说，如果上面的代码将 type="number" 改为 type="text" ，将调起全键盘而不会是九宫格数字键盘。

常用的正则表达式

pattern的用法都一样，这里不再啰嗦各种详细写法了，只是列出来一些常用的正则就好了：

信用卡 [0-9]{13,16}
银联卡 ^62[0-5]\d{13,16}$
Visa: ^4[0-9]{12}(?:[0-9]{3})?$
万事达： ^5[1-5][0-9]{14}$
QQ号码： [1-9][0-9]{4,14}
手机号码： ^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
身份证： ^([0-9]){7,18}(x|X)?$
密码： ^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
强密码： ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间
7个汉字或14个字符： ^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

浏览器支持

很不幸，pattern的浏览器支持很惨： via Can I Use
但是如果只是如文章开头提到的改 数字键盘的话，iOS和Android都是没有问题的。

HTML5本地裁剪图片

Wed, 15 Jul 2015 15:55:24 CST

先上效果图：

我们首先需要创建一个 index.html文件，里面写上一些简单的 html和 css代码：

  <!DOCTYPE html>
<html>
<head>
    <title>HTML5 Crop Image</title>
</head>
<style type="text/css">
body{text-align:center;}
#label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
#get_image{position:absolute;}
#edit_pic{position:absolute;display:none;background:#000;}
#cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
#show_edit{margin: 0 auto;display:inline-block;}
#show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }
</style>
<body>
<input type="file" name="file" id="post_file">
<button id="save_button">SAVE</button>


<div id="label">
    <canvas id="get_image"></canvas>
    <p>
        <canvas id="cover_box"></canvas>
        <canvas id="edit_pic"></canvas>
    </p>
</div>




<p>
    <span id="show_edit"></span>
    <span id="show_pic"><img src=""></span>
</p>


<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

以上的三个 <canvas>标签都是用来处理跟图片相关的内容的，详细的处理会在后续的js代码中给出。而 id为 show_edit 和 id为 show_pic这两个是为了图片的预览和查看最后的图片生成结果。做完html和css的布局之后，我们就可以进入js代码，实现本节课的图片裁剪功能。

实现图片裁剪的init函数：

  var postFile = { 
        init: function() {
        var t = this;
        t.regional = document.getElementById('label');
        t.getImage = document.getElementById('get_image');
        t.editPic = document.getElementById('edit_pic');
        t.editBox = document.getElementById('cover_box');
        t.px = 0;    //background image x
        t.py = 0;    //background image y
        t.sx = 15;    //crop area x
        t.sy = 15;    //crop area y
        t.sHeight = 150;    //crop area height
        t.sWidth = 150    //crop area width
        document.getElementById('post_file').addEventListener("change", t.handleFiles, false);
    },

}

我们将所有的函数和变量都是封装在 postFile这个对象里面的，上面的 init方法主要是设置一些初始值

  t.px = 0;    
t.py = 0;    
t.sx = 15;   
t.sy = 15;   
t.sHeight = 150;    
t.sWidth = 150

以上的 t.px t.py分别表示在实时预览区域的背景图片的坐标； t.sx， t.sy， t.sHeight， t.sWidth分别表示图片的横纵坐标和宽高。

并且我们通过 document.getElementById获取了多个稍后需要操作的元素，注意到：

  document.getElementById('post_file').addEventListener("change", t.handleFiles, false);

我们通过监听 id为 post_file的 input表单的 change事件来处理用户上传的文件，在这我们交给了 handleFiles函数来处理，所以下面我们就来实现 handleFiles函数。

实现handleFiles，获取文件，读取文件并生成url

   handleFiles: function() {
        var fileList = this.files[0];
        var oFReader = new FileReader();
        oFReader.readAsDataURL(fileList);
        oFReader.onload = function (oFREvent) { 
            postFile.paintImage(oFREvent.target.result);
        };
    },

上面这几行代码就可以基本实现 handleFiles的处理功能，我们在这里就使用了HTML5的File API，首先通过 new FileReader()来实例化一个 FileReader对象 oFReader，再调用其 readAsDataURL()方法将文件的内容读取出来并处理成base64编码的格式。

如果你对 var fileList = this.files[0];有疑问，不妨在在这里打印出来看看：

  console.log(this.files);

你将会看到类似于这样的打印输出：

最后，当文件读取完毕并完成加载的时候，我们通过 postFile.paintImage(oFREvent.target.result)处理我们读取到的图片，说白了就是将读取到的图片数据重新绘画到浏览器上。

关于 oFREvent究竟是什么东西，你可以通过 console.log(oFREvent)来查看。你还可以查看这里的链接来获取更多的FileReader的知识：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

实现paintImage函数

   paintImage: function(url) {
        var t = this;
        var createCanvas = t.getImage.getContext("2d");
        var img = new Image();
        img.src = url;
        img.onload = function(){

            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;

            } else {
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var pHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;

            createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);
            t.imgUrl = t.getImage.toDataURL();
            t.cutImage(); 
            t.drag();
        };
    },

以上最重要的就是根据容器的大小使用canvas绘制图片。在上一步使用File API的FileReader已经得到了需要上传图片的地址了( oFREvent.target.result这个值)，接下来需要使用canvas把这个图片绘制出来。我们首先使用到 getImage.getContext来获取 <canvas id="get_image"></canvas>的2d内容，简单理解就是图像内容，然后利用 new Image()来得到一个 <img>标签，设置 src属性的值，如果你 console.log(img),得到的大概是这样的结果：

  <img src="images/background.png" >

在 img.onload函数里，我们的主要目的是为了将图片按照原大小等比例地重画出来，所以才有if条件判断，最后我们通过 createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);这一行代码来实现真正的绘画图片，效果大概是这样的：

这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层( id为 label的div)，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。

如果你对drawImage()有任何疑问，点击下面的链接进行详细的了解：

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContex...

到这里，前期的一小半工作其实已经完成了，我们按照上面的思路，接下来就把 cutImage和 drag这两个方法实现就可以了。

实现cutImage方法

在上一张图片中，我们其实很清楚地看到了两个明暗不一的层，这是因为我们根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的 clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比，这样的目的一个是为了更好地看到对比，一个就是为了用户体验：

  cutImage: function() {
    var t = this;

    //绘制遮罩层：
    t.editBox.height = t.imgHeight;
    t.editBox.width = t.imgWidth;
    t.editBox.style.display = 'block';
    t.editBox.style.left = t.px;
    t.editBox.style.top = t.py;

    var cover = t.editBox.getContext("2d");
    cover.fillStyle = "rgba(0, 0, 0, 0.5)";
    cover.fillRect (0,0, t.imgWidth, t.imgHeight);
    cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);

    //预览图片

    document.getElementById('show_edit').style.background = 'url(' + t.imgUrl + ')' + -t.sx + 'px ' + -t.sy + 'px no-repeat';
    document.getElementById('show_edit').style.height = t.sHeight + 'px';
    document.getElementById('show_edit').style.width = t.sWidth + 'px';
},

以上的 cutImage方法主要是负责两个事情，一个是制造遮罩层，一个是利用css的 background属性将选中的裁剪区域实时预览。

但是需要注意的是，这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。

编写drag方法

在很多web应用中，使用截图上传头像功能时我们希望能裁剪到满意的图片，所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了，所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片

先来一张预览图片：

     
 drag: function() {
        var t = this;
        var draging = false;
        var startX = 0;
        var startY = 0;

        document.getElementById('cover_box').onmousemove = function(e) {
            var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
            var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

            if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
                this.style.cursor = 'move';

                this.onmousedown = function(){
                    draging = true;

                    t.ex = t.sx;
                    t.ey = t.sy;

                    startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                    startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

                }
                window.onmouseup = function() {
                    draging = false;
                }

                if (draging) {

                    if ( t.ex + (pageX - startX) < 0 ) {
                        t.sx = 0;
                    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                        t.sx = t.imgWidth - t.sWidth;
                    } else {
                        t.sx = t.ex + (pageX - startX);
                    };

                    if (t.ey + (pageY - startY) < 0) {
                        t.sy = 0;
                    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                        t.sy = t.imgHeight - t.sHeight;
                    } else {
                        t.sy = t.ey + (pageY - startY);
                    }

                    t.cutImage();
                }
            } else{
                this.style.cursor = 'auto';
            }
        };
    }

这个方法里要理解一下几个主要的点：

  var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

我们通过上面两行代码来获取 鼠标距离背景图片的距离， e.pageX代表鼠标到浏览器左边缘的距离， t.regional.offsetLeft + this.offsetLeft可以计算出图片到浏览器的左边边缘的距离。上边的距离同理可得。

     
 if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )

在理解了 鼠标距离背景图片的距离距离之后，这个应该很容易理解：就是判断鼠标是否在图片的区域内部。

     
t.ex = t.sx; 
t.ey = t.sy;

startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

这两段代码也是要拿出来说说的，头两行是为了记录上一次截图时候的坐标（没有上一次就是初始化的时候的坐标）；后两行记录鼠标按下时候的坐标。你都可以通过 console.log()来分别查看这几个值。

     
if (draging) {


    if ( t.ex + (pageX - startX) < 0 ) {
        t.sx = 0;
    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
        t.sx = t.imgWidth - t.sWidth;
    } else {
        t.sx = t.ex + (pageX - startX);
    };

    if (t.ey + (pageY - startY) < 0) {
        t.sy = 0;
    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
        t.sy = t.imgHeight - t.sHeight;
    } else {
        t.sy = t.ey + (pageY - startY);
    }

    t.cutImage();
}

上面这一行代码就是说：如果实在拖动的情况下，我们需要根据坐标的变化来实时更新 t.sx和 t.sy的值,并且实时调用 cutImage方法实现预览。

移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)

最后，将裁剪的图片进行保存

从一开始，我们就有一个save按钮在页面上，我们的目的就是在用户点击save按钮的时候，将裁剪出来的图片保存到预览右边的方框内，于是，我们在 init方法里面添加下面的代码：

     
document.getElementById('save_button').onclick = function() {
    t.editPic.height = t.sHeight;
    t.editPic.width = t.sWidth;
    var ctx = t.editPic.getContext('2d');
    var images = new Image();
    images.src = t.imgUrl;

    images.onload = function(){
        ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); 
        document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.editPic.toDataURL();
    }

}

跟实现 painImage方法类似，首先监听save按钮的点击事件，然后我们将选中区域的图片利用 drawImage方法绘制出来，最后利用 toDataURL方法转换成base64编码格式并将该值赋予 show_pic下 img的 src属性，这样就完成了图片的裁剪保存。效果如图：

调用init方法

最后别忘了在开始之前调用 init方法，在js文件的最后一行加上：

  postFile.init();

最后的代码布局应该时这样的：

  var postFile = {

    init: function() {
        //codes
        },

    handleFiles: function() {
        //codes
        },

    //...methods
}
postFile.init();

Happy Hacking

Youtube网站正式全面使用HTML5

Fri, 30 Jan 2015 00:23:23 CST

四年前，Youtube官方曾宣布在网站上实验性的支持HTML5<video>标记，测试它跟使用Flash对比的效果。当时，由于诸多的限制，无法将这种技术广泛的运用到视频播放中。最重要的原因是，HTML5缺乏对Adaptive Bitrate (ABR)的支持，这种技术能让视频进行少量的缓冲就能播放。

经过最近的4年发展，浏览器的发展和各种广泛的交流促使HTML5技术和实际视频运用之间的差距越来越小。现在，在谷歌浏览器、IE11、苹果浏览器以及最新版的火狐浏览器中，使用HTML5<video>播放将成为缺省设置。

HTML5的优势并不是仅仅体现在web浏览器在，它还能运用到智能电视和其它流媒体设备中。下面是HTML5的一些关键技术指标：

支持 ABR（Adaptive Bitrate，自适应比特率）：ABR 能够有效减少缓冲时间，能利用媒体源拓展（ MediaSourse Extensions）使视频 / 直播在 Chrome, IE11, Safari 8 还有 beta 版的 Firebox 等众多浏览器中流畅播放。HTML5 也能照顾到多种流媒体设备，包括目前主流的 Xbox One，Playstation 4 和 Chromecast 等。
支持VP9 codec：VP9 codec 能有效节省带宽、加载时间和文件的大小。YouTube 团队鼓励开发者使用 iframe API代替 Flash，这样在很多不支持 Flash 的设备上也能进行视频的浏览。
加密媒体扩展 ( Encrypted Media Extensions)：通过这个扩展和正常加密的措施的结合，YouTube 的视频能够通过简单的配置，在不同平台上对多种内容保护技术进行支撑。简化了视频传输中由于加密保护与内容高度整合带来的不便，可以减少视频播放中的卡顿。
WebRTC 和全屏幕 API 支持：YouTube 开发者可以通过 WebRTC 在浏览器内开发直播工具插件。有了 HTML5 的全屏 API，YouTube 在标准的 HTML UI 下，就可提供沉浸式的全屏观看体验。

YouTube 将支持内嵌语法 <iframe>，放弃 Flash 时代惯用的 <object> 语法，全力支持 HTML5 video 标签。要内嵌影片的人，用 <iframe> API 内嵌影片，能够在所有平台顺利播放。

这种改进将不仅仅使YouTube收益，而是整个行业。其它的视频网站，比如 Netflix 和 Vimeo，甚至微软和苹果等公司，都在支持HTML5，并非常成功。基于开放的HTML5标准，像Chromebooks和Chremecast这样的新设备也成为了可能。同样，每个人都可以通过 <iframe> API将YouTube视频嵌入到自己网站上。

参考英文： YouTube now defaults to HTML5<video>

谷歌开始自动将Flash广告转为HTML5

Thu, 26 Feb 2015 16:46:28 CST

谷歌今天开始将Adobe Flash广告自动转换成HTML5格式，方便谷歌的广告主将广告送达更多用户——即使其使用的设备或浏览器不支持Flash。

来源：新浪科技

谷歌从去年9月开始提供HTML5版的互动备份，同时放弃了对Flash的支持。谷歌显示广告网络和DoubleClick Campaign Manager提供的转换工具可以创建HTML5版的Flash广告，其效果与原先的广告相同，而不仅仅是一个静态的图像备份。

而现在，谷歌可以自动将合格的Flash广告系列转换成HTML5，包括现有广告和新广告。所有广告主都只要通过AdWords、AdWords Editor或其他与谷歌广告平台兼容的第三方工具上传其广告即可。

但谷歌所谓的“合格”值得进行一番详细解释：“并非所有Flash广告都可以转换成HTML5.要了解你的Flash广告能否转换，请先将其上传到Swiffy工具。如果这个工具能够转换你的广告，你上传到AdWords的广告就可以自动转换。”

换句话说，谷歌正在逐渐将所有的Flash广告都转换成HTML5格式。最终，绝大多数广告从一开始可能就会直接使用HTML5。

事实上，谷歌早就开始推动Flash向HTML5的转换趋势。例如，该公司旗下的YouTube曾在2010年1月发布测试版HTML5播放器，上月最终将默认格式由Flash调整为HTML5。

HTML5 实现橡皮擦的擦除效果

Wed, 25 Feb 2015 21:23:38 CST

体验效果：
http://keleyi.com/keleyi/phtml/html5/32.htm

请使用支持HTML5的浏览器查看效果，请按住鼠标拖动。

最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下：

这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡出翔了，因为客户要求，在android不要求特别流畅，至少要能玩，但是网上找的那个demo实在太卡，根本就是没法玩的情况。于是就想自己写一个算了，本文也就权当记录一下研究过程。

　　这种刮图的效果，首先想到就是用HTML5的canvas来实现，而canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除区域矩形，毕竟大部分人的习惯中的橡皮擦都是圆形的，所以就引入了剪辑区域这个强大的功能，也就是clip方法。用法很简单：　

ctx.save()
ctx.beginPath()
ctx.arc(x2,y2,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

上面那段代码就实现了圆形区域的擦除，也就是先实现一个圆形路径，然后把这个路径作为剪辑区域，再清除像素就行了。有个注意点就是需要先保存绘图环境，清除完像素后要重置绘图环境，如果不重置的话以后的绘图都是会被限制在那个剪辑区域中。

　　擦除效果有了，现在就是写鼠标移动擦除的效果了，下面我均用鼠标来描述，因为移动端也差不多，就是把mousedown换成touchstart，mousemove换成touchmove，mouseup换成touchend、以及获取坐标点由e.clientX换成e.targetTouches[0].pageX而已。

　　实现鼠标移动擦除，刚开始就是想到鼠标移动时在触发的mousemove事件中对鼠标所在位置进行圆形区域擦除，写出来后发现，当鼠标移动速度很快的时候，擦除的区域就不连贯了，就会出现下面这种效果，这显然不是我们想要的橡皮擦擦除效果。

既然所有点不连贯，那接下来要做的事就是把这些点连贯起来，如果是实现画图功能的话，就可以直接通过lineTo把两点之间连接起来再绘制，但是擦除效果中的剪辑区域要求要是闭合路径，如果是单纯的把两个点连起来就无法形成剪辑区域了。然后我就想到用计算的方法，算出两个擦除区域中的矩形四个端点坐标来实现，也就是下图中的红色矩形：

计算方法也很简单，因为可以知道两个剪辑区域连线两个端点的坐标，又知道我们要多宽的线条，矩形的四个端点坐标就变得容易求了，所以就有了下面的代码：

var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))
var x3 = x1+asin;
var y3 = y1-acos;
var x4 = x1-asin;
var y4 = y1+acos;
var x5 = x2+asin;
var y5 = y2-acos;
var x6 = x2-asin;
var y6 = y2+acos;

x1、y1和x2、y2就是两个端点，从而求出了四个端点的坐标。这样一来，剪辑区域就是圈加矩形，代码组织起来就是：

var hastouch = "ontouchstart" in window?true:false,//判断是否为移动设备
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup";

canvas.addEventListener(tapstart , function(e){
e.preventDefault();

x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

　　//鼠标第一次点下的时候擦除一个圆形区域，同时记录第一个坐标点
ctx.save()
ctx.beginPath()
ctx.arc(x1,y1,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

canvas.addEventListener(tapmove , tapmoveHandler);
canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler);
});
　　//鼠标移动时触发该事件
function tapmoveHandler(e){
e.preventDefault()
x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

　　　　//获取两个点之间的剪辑区域四个端点
var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))
var x3 = x1+asin;
var y3 = y1-acos;
var x4 = x1-asin;
var y4 = y1+acos;
var x5 = x2+asin;
var y5 = y2-acos;
var x6 = x2-asin;
var y6 = y2+acos;

　　　　//保证线条的连贯，所以在矩形一端画圆
ctx.save()
ctx.beginPath()
ctx.arc(x2,y2,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

　　　　//清除矩形剪辑区域里的像素
ctx.save()
ctx.beginPath()
ctx.moveTo(x3,y3);
ctx.lineTo(x5,y5);
ctx.lineTo(x6,y6);
ctx.lineTo(x4,y4);
ctx.closePath();
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

　　　　//记录最后坐标
x1 = x2;
y1 = y2;
}
})

如此一来，鼠标擦除的效果就实现了，不过还有一个要实现的点，就是大部分擦除的效果，当你擦了一定数量的像素后，就会自动把所有图片内容呈现出来，这个效果，我是用imgData来实现的。代码如下：

var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=1){
for(var y=0;y<imgData.height;y+=1){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] > 0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height)<0.4){
canvas.className = "noOp";
}

获取到imgData，对imgData里的像素进行遍历，然后再对imgData的data数组里的rgba中的alpha进行分析，也就是分析透明度，如果像素被擦除了，那透明度就是0了，也就是把当前画布中透明度不为0的像素的数量跟画布总像素数进行比较，如果透明度不为0 的像素数比例低于40%，那说明当前画布上就以后有百分六十以上的区域被擦除了，就可以自动呈现图片了。

　　此处注意，我是把检查像素这段代码方法mouseup事件里面的，因为这个计算量相对来说还是不小，如果用户狂点鼠标，就会狂触发mouseup事件，也就是会疯狂的触发那个循环计算像素，计算量大到阻塞进程，导致界面卡住的情况，缓解办法如下：加个timeout，延迟执行像素计算，而在每一次点击的时候再清除timeout，也就是如果用户点击很快，这个计算也就触发不了了，还有一个提升的办法就是抽样检查，我上面的写法是逐个像素检查，逐个像素检查的话像素量太大，肯定会卡的，所以可以采用抽样检查，比如每隔30个像素检查一次，修改后的代码如下：

timeout = setTimeout(function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=30){
for(var y=0;y<imgData.height;y+=30){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] >0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height/900)<0.4){
canvas.className = "noOp";
}
},100)

这样就可以较大限度的防止用户狂点击了，如果有其他更好的检查方法欢迎给出意见，谢谢。

　　到了这一步就都写完了，然后就是测试的时候了，结果并不乐观，在android上还是卡啊卡啊，所以又得另想办法，最终发现了绘图环境中的globalCompositeOperation这个属性，这个属性的默认值是source-over，也就是，当你在已有像素上进行绘图时会叠加，但是还有一个属性是destination-out，官方解释就是：在源图像外显示目标图像。只有源图像外的目标图像部分才会被显示，源图像是透明的。好像不太好理解，但是其实自己测试一下就会发现很简单，也就是在已有像素的基础上进行绘图时，你绘制的区域里的已有像素都会被置为透明，直接看张图更容易理解：

globalCompositeOperation属性效果图解。

　　有了这个属性后，就意味着不需要用到clip，也就不需要用sin、cos什么的计算剪辑区域，直接用条粗线就行了，这样一来就能够很大限度的降低了计算量，同时减少了绘图环境API的调用，性能提升了，在android上运行应该也会流畅很多，下面是修改后的代码：

//通过修改globalCompositeOperation来达到擦除的效果
function tapClip(){
var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup";

canvas.addEventListener(tapstart , function(e){
　　　　 clearTimeout(timeout)
e.preventDefault();

x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.lineCap = "round";　　//设置线条两端为圆弧
ctx.lineJoin = "round";　　//设置线条转折为圆弧
ctx.lineWidth = a*2;　　
ctx.globalCompositeOperation = "destination-out";

ctx.save();
ctx.beginPath()
ctx.arc(x1,y1,1,0,2*Math.PI);
ctx.fill();
ctx.restore();

canvas.addEventListener(tapmove , tapmoveHandler);
canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler);

　　　　　　　timeout = setTimeout(function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=30){
for(var y=0;y<imgData.height;y+=30){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] > 0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height/900)<0.4){
canvas.className = "noOp";
}
　　　　　　　},100)
});
function tapmoveHandler(e){
e.preventDefault()
x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.save();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore()

x1 = x2;
y1 = y2;
}
})
}

擦除那部分代码就这么一点，也就相当于画图功能，直接设置line属性后通过lineTo进行绘制线条，只要事前把globalCompositeOperation设成destination-out，你所进行的一切绘制，都变成了擦除效果。鼠标滑动触发的事件里面代码也少了很多，绘图对象的调用次数减少了，计算也减少了，性能提升大大滴。

　　改好代码后就立即用自己的android机子测试了一下，果然如此，跟上一个相比，流畅了很多，至少达到了客户要求的能玩的地步了。

附完整HTML文件代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0;">
<title>HTML5橡皮檫-柯乐义</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}

.box {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: url("http://keleyi.com/keleyi/phtml/html5/32/keleyi.jpg") no-repeat;
background-size: 100% 100%;
backface-visibility: hidden;
overflow: hidden;
}

#cas_keleyi_com {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity .5s;
-ms-transition: opacity .5s;
-moz-transition: opacity .5s;
}

.noOp {
opacity: 0 !important;
}
</style>
</head>
<body>
<div class="box" id="bb">
<canvas id="cas_keleyi_com"></canvas>
<a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/a/bjae/uvolnjek.htm">原文</a>
</div>

<script type="text/javascript" charset="utf-8">
var canvas = document.getElementById("cas_ke"+"leyi_com"),ctx = canvas.getContext("2d");
var x1,y1,a=30,timeout,totimes = 100,jiange = 30;
canvas.width = document.getElementById("bb").clientWidth;
canvas.height = document.getElementById("bb").clientHeight;
var img = new Image();
img.src = "http://keleyi.com/keleyi/phtml/html5/32/hovertree.jpg";
img.onload = function(){
ctx.drawImage(img,0,0,canvas.width,canvas.height)
//ctx.fillRect(0,0,canvas.width,canvas)
tapClip()
}

//通过修改globalCompositeOperation来达到擦除的效果
function tapClip(){
var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup";

ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = a*2;
ctx.globalCompositeOperation = "destination-out";

canvas.addEventListener(tapstart , function(e){
clearTimeout(timeout)
e.preventDefault();

x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.save();
ctx.beginPath()
ctx.arc(x1,y1,1,0,2*Math.PI);
ctx.fill();
ctx.restore();

canvas.addEventListener(tapmove , tapmoveHandler);
canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler);

timeout = setTimeout(function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=jiange){
for(var y=0;y<imgData.height;y+=jiange){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] >0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
canvas.className = "noOp";
}
},totimes)
});
function tapmoveHandler(e){
clearTimeout(timeout)
e.preventDefault()
x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.save();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore()

x1 = x2;
y1 = y2;
}
})
}

//使用clip来达到擦除效果
function otherClip(){
var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup";

canvas.addEventListener(tapstart , function(e){
clearTimeout(timeout)
e.preventDefault();

x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.save()
ctx.beginPath()
ctx.arc(x1,y1,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

canvas.addEventListener(tapmove , tapmoveHandler);
canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler);

timeout = setTimeout(function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=jiange){
for(var y=0;y<imgData.height;y+=jiange){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] >0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
canvas.className = "noOp";
}
},totimes)

});

function tapmoveHandler(e){
e.preventDefault()
x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)));
var x3 = x1+asin;
var y3 = y1-acos;
var x4 = x1-asin;
var y4 = y1+acos;
var x5 = x2+asin;
var y5 = y2-acos;
var x6 = x2-asin;
var y6 = y2+acos;

ctx.save()
ctx.beginPath()
ctx.arc(x2,y2,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

ctx.save()
ctx.beginPath()
ctx.moveTo(x3,y3);
ctx.lineTo(x5,y5);
ctx.lineTo(x6,y6);
ctx.lineTo(x4,y4);
ctx.closePath();
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();

x1 = x2;
y1 = y2;
}
})
}
</script>
</body>
</html>

http://keleyi.com/a/bjae/uvolnjek.htm

http://www.cnblogs.com/axes/

特效集合：

http://ini.iteye.com/blog/2165698

http://ini.iteye.com/blog/2163592

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

别不信！App三年内将被HTML5顶替彻底消失？

Sun, 08 Feb 2015 21:37:29 CST

2007年W3C(万维网联盟)立项HTML5，直至2014年10月底，这个长达八年的规范终于正式封稿。

过去这些年，HTML5颠覆了PC互联网的格局，优化了移动互联网的体验，接下来，HTML5将颠覆原生App世界。这听起来有点危言耸听，但若认真分析HTML5的发展史，你会发现，这个世界的发展趋势确实就是这样。

HTML5对开发者的7大优势

跨平台：

在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。

快速迭代：

移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。

持续交付：

很多人有这样的体会，一个原生应用上线Appstore，突然有一个大bug，只好连夜加班修复，然后静静等待2周或更长时间的Apple审核，这2个星期被用户的涂抹淹死，市场上一片差评，用户大量流失。等新应用被审核上线了，用户已经卸载了。但是，HTML5没有这些问题，你可以实时更新，有问题立即响应。

大幅下降成本：

创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。

开源生态系统发达：

HTML5前端是开放的正反馈循环生态系统，大量的开源库可以使用，开发应用变得更轻松、更敏捷，当然这也体现在了快速迭代和成本下降上。不过更重要的是，这种开放的正反馈循环生态系统未来的生命力是比原生生态系统更强劲的。

开放的数据交换：

HTML是以page为单元开放代码的，它无需专门开发SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据，也更容易通过跨应用协作来满足最终用户需求。

更容易推广、更容易爆发：

导流入口多：HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。

流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。

导流效率高：除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。

HTML5对最终用户的3大优势

大幅降低使用门槛

为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因用户太“懒”。让用户更方便的满足需求，有时效果好于更多的满足需求。

用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠覆。

不管是App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。

实时更新、差量更新的优秀体验

HTML5应用可以绕开应用市场的限制进行自主实时更新，用户可以快速享受新服务。

而且这种更新完全可以是差量更新，比如某个HTML页面或某个js文件有问题，只更新这个几k的小文件就可以了，这比原生应用的更新体验好太多。

跨应用的使用体验

目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心很影响效率和体验。用户想出差三亚，先打开去哪App订票，然后切回桌面，再找到并打开天气App，搜索输入三亚，再切到桌面，找到并打开航旅纵横App，输入航班号值机，哦对了，航班号多少来着，再切到桌面，找到并打开去哪App看航班号，最后找到并打开租车App，输入租车地点，然后再切回桌面。

在原生应用体系下，用户只能这样。但在HTML5体系下，他不需要切回桌面，他可以在App间方便的直接跳来跳去，而不是使用一个一个孤岛App;他更不用重复录入数据，应用间可以方便的互相传递数据。

这种模式需要一点想象力，但未来迟早会来。

分析至此，我们可以明显的看出，不管是站在最终用户角度、还是站在开发者角度，HTML5必将取代原生应用当前的位置。并由此引发一系列颠覆。

原生App的颠覆

HTML5的“性工能”障碍得到解决，可以接近原生App的效果，所以它就可以替代原生App吗?很多人认为，即使HTML5会发展的比现在好，也将是与原生App各占一部分市场的格局，要求不高的长尾应用会使用HTML5，而主流应用仍是原生App的天下。

但这样的想法很危险，就像Apple成立前，HP的高层告诉沃兹：谁会在家里摆一台电脑呢?未来HTML5肯定会颠覆原生App。

HTML5 Web Speech API，让网站更有趣

Thu, 05 Feb 2015 15:39:02 CST

Web API 变得越来越丰富，其中一个值得注意的是 Web Speech API。传统的网站只能“说”，这个API的出现，让网站能“倾听”用户。这个功能已经开放了一系列的用法，非常棒。

在这篇文章中，我们将看一下这项技术和建议的用法，以及如何用它来增强用户体验的一些好例子。

声明：本技术比较前沿，目前该规范是W3C的“非官方编辑器的征求意见稿”（截至2014年6月6日）。它的使用方法可能和本文中的代码片有所不同。查看代码规范和发布前的测试是很有必要的。

语音合成 Speech Synthesis

该API分为两部分。首先，让我们来看看语音的合成部分——说话。如果你的网站有一些文字内容——文章主体、表单、输入框、标签等——你可以运行一些有趣的功能，设备就会把文字读给用户听。

来看看做到这一点所需要的代码。首先创建 SpeechSynthesisUtterance接口的新实例。然后指定要阅读的文本。再把这个实例添加到队列中，告诉浏览器什么时候说话。

下面的speak函数里完成了上面所述的功能，把想要朗读的内容作为参数。

  function speak(textToSpeak) {
   //创建一个 SpeechSynthesisUtterance的实例
   var newUtterance = new SpeechSynthesisUtterance();

   // 设置文本
   newUtterance.text = textToSpeak;

   // 添加到队列
   window.speechSynthesis.speak(newUtterance);
}

现在我们需要做的就是调用这个函数，并传入我们想要朗读的内容：

  speak('Welcome to Smashing Magazine');

SpeechSynthesisUtterance还有开始、暂停、停止功能，还能设置语言、速度、声音。停止、启动或暂停都触发一个事件，开发者可以编写这个事件来完成很多有趣的事情。

目前，语音合成只有Chrome和Safari（包括桌面和移动设备版）支持。此外，通过API提供给用户的声音在很大程度上取决于操作系统。谷歌有自己的一套给Chrome的默认声音，可以在Mac OS X，Windows和Ubuntu上使用。Mac OS X的声音也可用，所以和OSX的Safari的声音一样。你可以通过开发者工具的控制台看有哪种声音可用。

  window.speechSynthesis.getVoices();

如果你使用OS X，可以用“Zarvox”声音

语音识别 Speech Recognition

Web Speech API另一部分是语音识别，它能够识别用过从麦克风或网站应用获取的语音。

让我们通过一些代码运行。这一次，我们将创建 SpeechRecognition的新实例。因为这部分只得到了Chrome的支持，所以要添加WebKit的前缀。

  var newRecognition = webkitSpeechRecognition();

peechRecognition有相当多的属性。比如状态是可连续的，浏览器在没有接收到声音的一段时间后默认把状态设为 false，如果你想继续听，可以设为 true。

  newRecognition.continuous = true;

开启和停止语音识别，使用 start() 、 stop()：

  // 开始
newRecognition.start();

// 停止
newRecognition.stop();

还可以绑定很多事件，例如： soundstart、 speechstart、 result 、 error。看看这个demo。

使用场景举例

听写

目前，Speech API最常见的用法是听写和读取。也就是用户通过麦克风说话，设备把语音翻译成文字（看看 Chrome开发团队做的demo），或者设备读取文字转化成语音。

设备能说话这是非常有用的功能。设想一下，当你早上起床的时候，镜子告诉你今天的天气，这多么神奇。

很多汽车都有语音系统，在你开车的时候给你导航。设想一下，当你在开车的时候，浏览器把你想要的内容读给你听，多么方便。

声音控制

听写可以很容易地变成语音控制。正如上面的例子，我们可以通过语音导航。如果把这个功能加入到网络电视的浏览器中，将会有更多有意思的实现。

我的同事做了个网球应用，在他打球的时候，它的应用会把他的分数读出来。

翻译

未来翻译会变得很不一样。一个人说了一段话，设备就翻译成对方的语言并读出。

限制

离线是需要注意的问题。目前API的实现是浏览器把数据发送到远端服务器，再把处理好的数据返回。没有网络就无法实现功能。

英文原文： Enhancing User Experience With The Web Speech API
由SegmentFault整理翻译

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

Sun, 04 May 2014 09:25:58 CST

不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在 HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/预读取(Link prefetch)。

页面资源预加载/预读取(Link prefetch)是什么？来自 MDN的解释:

页面资源预加载(Link prefetch)是浏览器提供的一个技巧，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示，当浏览器加载完当前页面后，它会在后台静悄悄的加载指定的文档，并把它们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。

简单说来就是：让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)。而且方法超级的简单！

HTML5页面资源预加载(Link prefetch)写法

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.webhek.com/misc/3d-album/" />

<!-- 预加载一个图片 -->
<link rel="prefetch" href=" http://www.webhek.com/wordpress/
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5页面资源预加载/预读取(Link prefetch)功能是通过 Link标记实现的，将 rel属性指定为“prefetch”，在 href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持：

<link rel="prefetch alternate stylesheet" 
title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />

HTTPS协议资源下也可以使用prefetch。

什么情况下应该预加载页面资源

在你的页面里加载什么样的资源，什么时候加载，这完全取决于你。下面是一些建议：

当页面有幻灯片类似的服务时，预加载/预读取接下来的1-3页和之前的1-3页。
预加载那些整个网站通用的图片。
预加载网站上搜索结果的下一页。

禁止页面资源预加载(Link prefetch)

火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能，你可以这样设置：

user_pref("network.prefetch-next", false);

页面资源预加载(Link prefetch)注意事项

下面是一些关于页面资源预加载(Link prefetch)的注意事项：

预加载(Link prefetch)不能跨域工作，包括跨域拉取cookies。
预加载(Link prefetch)会污染你的网站访问量统计，因为有些预加载到浏览器的页面用户可能并未真正访问。
火狐浏览器从2003年开始就已经提供了对这项预加载(Link prefetch)技术的支持。

利用浏览器空闲时间加载一些额外的资源文件，看起来是既刺激又危险，你想试试这些技术吗？

原文来自： webhek

使用HTML5技术控制电脑或手机上的摄像头

Fri, 02 May 2014 00:37:39 CST

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是 getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。

观看演示

HTML代码

下面的代码里我写了一部分注释，请阅读：

<!--
	理想情况下我们应该先判断你的设备上是否
	有摄像头或相机，但简单起见，我们在这里直接
	写出了HTML标记，而不是用JavaScript先判断
	然后动态生成这些标记
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

在写出上面这些标记前应该判断用户的客户端是否有摄像头支持，但这里为了不那么麻烦，这里直接写出了这些HTML标记，需要注意的是我们这里使用的长宽是640×480。

JavaScript代码

因为我们是手工写出的HTML，所以下面的js代码会比你想象的要简单了很多。

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function(error) {
			console.log("Video capture error: ", error.code); 
		};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
}, false);

一旦判断出用户浏览器支持 getUserMedia ，下面就非常简单了，只需要将那个 video元素的 src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情！

拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器，将视频画面画到画布上。

// 触发拍照动作
document.getElementById("snap")
       .addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

当然，你还可以在图片上加一些滤镜效果….我还是把这些技术放到以后的文章里再说吧。但至少你可以将这个画布图像转换成一张图片。

观看演示

以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头，这不免有些复杂。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头，而且是因为HTML5的画布技术及其强大，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！

HTML5 视频直播（一）

Fri, 24 Apr 2015 09:35:11 CST

前不久工作中遇到了在移动 WEB 端直播视频的需求，研究了一下相关技术，记录一下。

目前 WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前就只有 HLS 能用，我们重点介绍它。

HTTP Live Streaming

HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如：MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP，非常简单。一个提供 HLS 的服务器需要做两件事：

编码：以 H.263 格式对图像进行编码，以 MP3 或者 HE-AAC 对声音进行编码，最终打包到 MPEG-2 TS（Transport Stream）容器之中；
分割：把编码好的 TS 文件等长切分成后缀为 ts 的小文件，并生成一个 .m3u8 的纯文本索引文件；

浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像，可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放，全部放完再请求一下 m3u8 文件，获得包含最新 ts 文件的播放列表继续播，周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成，m3u8 必须动态更新，ts 可以走 CDN。

可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应，所以适应性很好，不会受到防火墙影响。但它也有一个致命的弱点：延迟现象非常明显。如果每个 ts 按照 5 秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度，减少 m3u8 中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能需要根据实际情况找到一个折中的点。

对于支持 HLS 的浏览器来说，直接这样写就能播放了：

  <video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400"></video>

对于不支持 m3u8 的浏览器，比如 PC / Mac 上的 Chrome，需要借助 Flash 来实现了。网上有一些较为成熟的方案可以直接用，如： Sewise Player（免费）、 JW Player（收费）。

Real Time Messaging Protocol

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小。但是无法支持移动端 WEB 播放是它的硬伤。

前面提到的 JW Player 能很好的播放采用 RTMP 协议的直播服务。

这次先写这么多，下一篇写一个另类的直播方案。

本文链接： https://www.imququ.com/post/html5-live-player-1.html

--EOF--

推荐：领略前端技术阅读奇舞周刊

在HTML5移动应用中挖掘XSS漏洞

Thu, 26 Mar 2015 06:00:50 CST

Linus ( @_zulln )是一位有着15年漏洞挖掘经验的瑞士黑客，本文就是他写的。

现在使用HTML5开发移动APP越来越受欢迎。HTML5不仅开发效率高，而且可以跨平台，代码重用性也很高。Zoho（全球第一大在线软件提供商，总部位于美国）是一个有着1300万用户的HTML5邮件系统，我打算挖挖他们的漏洞。

寻找Html和Javascript代码

首先我从Google Play上下载了APK，用解压软件打开。

assets文件夹中有很多html文件，html文件和javascript文件要比java文件读起来易懂很多。

翻了几下之后我发现mailDetail.html是用来显示邮件内容的，这里有一个漏洞非常有趣。

读了代码，懂了代码结构之后，发现它调用了setContent方法：

function setContent(contentToSet,margin){
    document.body.style.marginTop = margin + "px";
    document.body.style.marginBottom = "10px";
    setBaseURL();
    document.getElementById('mailcontentid').innerHTML = "";
    handleContentForMailThread($('mailcontentid'), contentToSet);
    androidResponse();
    }
function handleContentForMailThread(contentEl,value) {
    var ind = value.indexOf("<blockquote");// NO I18N
    if(ind < 0) {
    	addContentToElement(contentEl,value);
        return;
    }
    else
    {
        // removed 54 lines here for readability
    }
    }
function addContentToElement(contentEl,value){
	contentEl.innerHTML = value;
	addListener();
	}

如果你跟踪contentToSet变量(应该是邮件内容)，你会发现javascript代码中没有对数据做任何转义操作，所以，如果有任何转义或者安全操作，都只能是在服务端做的，或者在java代码中做的。

确定邮件内容是否做过安全处理

最简单的办法就是在setContent函数的开始未知加入payload代码，比如alert(contentToSet),然后打包重签名。

我在apk 包中加入了如下几个payload：

test<jukk

http://test<jukk

http://test%3Cjukk

结果如下：

前两个payload被正确处理了，但是第三个payload(我事先对数据做了url编码)中显示了一个<尖括号。

貌似后台有一个黑名单，如果时间足够，这些黑名单肯定可以被绕过，但是我对手工fuzzing已经无感了，所以我走了另外一条路。

逆向APK

我没有写过apk，所以我决定寻找webview相关的代码来读，当我找到从java传递数据到html的代码的时候，我被webView.loadUrl绊倒了，这明显可以执行javascript代码呀：

webView.loadUrl("javascript:initialize(" + myNumber + ");");

很明显zoho使用了跟上面类似的代码，才使得前面用url编码过得数据正确地显示出来。

通过使用dex2jar将apk逆向为.jar文件，我使用JD-GUI阅读这些jar文件，我搜索了setContent函数(之前提到的javascript函数)，

this.webView.loadUrl("javascript:setContent(" + JSONObject.quote(this.content) + "," + i + ")");

正如你看到的，zoho使用了类似的代码。

总结

zoho使用了webview.loadurl方法来调用setContent方法，这告诉我们什么？用这种方式打开uri，里面的 javascript就会被执行，任何pct-encode ugo的代码都会被当做正常代码来执行。

下面这些代码很容易理解

// this line of code:location.href = 'javascript:setContent("%22-alert%281%29-%22")';// is the same as this:location.href = 'javascript:setContent(""-alert(1)-"")';

问题很明显，通过在邮件中的任意地方包含如下的payload，就可以在邮件客户端中执行任意javascript代码：

%22-alert%281%29-%22

总结

在我将这个漏洞报告给zoho几天过后，他们在Google Play上发布了新版，并且我收到邮件被告知已经有其他人给zoho报告了这个漏洞。

我觉得这个漏洞非常有趣，其他很多APP可能会有很多相似的漏洞。不过在使用HTML开发的应用中寻找漏洞比在web中寻找漏洞要难一些。让我们一起挖洞拯救世界，让互联网更安全吧！

[消息来源 detectify.com，翻译/Conermx，转载请注明来自FreeBuf黑客与极客（FreeBuf.COM）]

Sewise Player 2.5.2 发布，HTML5 视频播放器

Sat, 27 Dec 2014 15:58:00 CST

Sewise Player 发布了 2.5.2 版本，更新内容如下：

1、增加primary参数，用于确定html5与flash播放的优先级。
2、HTML5模块加入draggable参数。
3、修复了在bootstrap框架中弹窗进度条错误的问题。
4、修复了Flash模块无法播放相对路径视频地址的问题。
5、修复了一此小问题。

http://git.oschina.net/jackzhang1204/sewise-player

https://github.com/jackzhang1204/sewise-player

Sewise Player是一款专业的免费网页HTML5视频、流播放器，它功能强大，体积小，跨平台，兼容性好，使用方便简洁。

微信圈养下，国内的HTML5生态有可能成为下一个Zynga

Wed, 24 Dec 2014 03:37:17 CST

本文的前作《 HTML 5定稿了？背后还是那场闹剧》和《反思HTML5惨痛的500天和四个谎言》分别讲了HTML5所谓“定稿”背后的商业利益博弈和反思两年前那场“Web App和Native App”的大争论，本文将继续阐述HTML5的未来， 那就是旧敌未消，新敌又起。

HTML5如果颠覆了原生APP，不会是简单的Web App崛起，而是意味着“大生态”系统的构建，包括新的操作系统、新的玩家、新的商业模式、新的产品逻辑等等。但没有几个人真的相信这种颠覆会很快出现。

微信的地盘他做主

抛开“HTML5颠覆APP”这种骇人听闻的说辞，业界已经看到一些构建HTML5 “小生态”机会的存在，例如微信已经融入原生生态并且构建了自己的HTML5小生态。但是融入生态意味着顺从，微信亦要看更高等生态系统如Apple的脸色，遵循玩家规则。同样微信“小生态”体系下的玩家亦要学会做个乖乖的顺从者，上周张小龙的发言给HTML5游戏重燃的热情浇了一盆冰水，不知是有意或是失言，谈话中对HTML5游戏的明确拒绝让业界好不容易重燃的希望再次受到打击。

回顾互联网开放平台，Facebook曾造就了Zynga也毁灭了Zynga，中国互联网开放平台打击合作商出手的力度只会“有过之而无不及”，美国市场数年前诞生过Zynga这样的公司，中国出现过类似机会只是从来没有真正实现过。微信马力十足的一步步掌控电商和游戏的流量、收编媒体，如果HTML5从业者剔除更多的野心，作个乖乖的顺从者从微信的小生态内分得一杯羹还是十分现实，只是这里没有构建“大生态”和“颠覆原生APP”的机会。

国内移动浏览器眼下已呈现日落西山之势，微信这样的“小生态”系统更是无法承载过大的野心，那么HTML5和当下生态系统到底如何共处并且获得发展？“融入”正在发生！市场不是不需要HTML5技术，只是不需要HTML5从业者的野心。

相比PC主导的web互联网，APP主导的移动互联网缺少了“流量促进规模化”的有效手段，“流量产生流量”即倒流的模式艰难的存在着。积分墙和广告推荐APP有效果，但是相比web时代一个链接跳转的高效模式效果又不那么理想。

HTML5只是App的血管

因此HTML5正在快速融入iOS与Android主导的原生生态系统！原生APP内嵌入webview访问web页面已经成为通行做法，用HTML5开发原生APP也早不是新鲜事。并且HTML5技术的进一步发展解决了原生APP生态的一些痼疾，例如APP的“孤岛效应”。

微信朋友圈分享让HTML5产生了盘活移动互联网流量的巨大价值，“将内容从一个APP快速、完整、高效的传输到另外一个APP”是HTML5最擅长的部分。在去中心化的用户设备桌面上，HTML5像血管一样连接了一个个的独立的APP器官并且输送血液到不同的APP中。这就是HTML5快速融入生态的表现之一，并且发挥自由流量的价值加速和逐步改造原生生态。

但是说了很久的，“HTML5颠覆APP”这种假大空的结论，就是另外一回事了。不能说HTML5颠覆APP的可能性不存在，但是就算颠覆也不会以我们目前可以轻易预期的形式出现，不会是移动浏览器也不会是APP内访问Web App。

所谓的颠覆，往往就是在我们不可预期的情况下以一种未知的形态扑面而来。最新的美国移动互联网报告显示，所有联网设备中PC份额已经被严重挤压到不足1/4并且呈现进一步萎缩的趋势，移动支付手段也推陈出新，基于“云端”架构的移动购物、商业等行为正在重塑各个传统领域，例如星巴克2013年移动交易额超过60亿元。

只有欧美HTML5市场催生了足够规模的成功案例情况下，中国的HTML5大生态领域才可能出现类似的机会。颠覆意味着革命、革命意味着创新，只有行业积聚了足够的创新人才、创新动力以及创新资源的时候，才会推动变革，只是目前这些创新的条件几乎无一具备。因此完全下赌注在基于HTML5技术的纯Web模式下，机会渺茫。

HTML已经遭遇了下一个对手

在残酷的互联网竞争环境下，3年可以造就一个公司更可以消灭一个公司，中国互联网更像“快餐经济”，把发展的指望放在5年后才可能出现的机会就等于自取灭亡。当下用HTML5远比赌HTML5更现实。

HTML的优势时技术简单，迭代快，渗透能力强。把一个HTML5的内容嵌入到任何APP中，技术工作量都很小，启动webview就可以实现应用嵌套，这些都是HTML5渗透力强的表现，透过HTML5将服务轻松落地到APP中。

但是纵观欧美市场，一种全新的融入形式正在崛起——“API嵌套”。

前一段时间一则新闻让人耳目一新，“Uber开放API实现在星巴克的APP叫车”，这种不同APP之间通过API的方式融入和开放，让“跨APP的流量”成为可能，并且结合开放API开发者可以随意定制使用流程、甚至用户UI界面，增强了用户的体验，也提升了流量的价值。

在一个宽松的体系下，开放API成为移动互联网的一种商业主流诉求，API经济一说由此崛起。并且API也存在技术简单、传播力好和渗透力强的优势，HTML5又生不逢时的遇到另外一个强劲的竞争者。

本文作者刘鑫，移动云服务APICloud创始人兼CEO，从SP梦网时代就开始持续关注移动Web开发，个人邮箱hi.seanliu@yahoo.com

除非注明，本站文章均为原创或编译，转载请注明：文章来自 36氪

36氪官方iOS应用正式上线，支持『一键下载36氪报道的移动App』和『离线阅读』立即下载！

Html5会成为页游厂商的强心针吗？

Sun, 14 Sep 2014 12:03:50 CST

自从神经猫之后，Html5 游戏开始攻占我们的朋友圈，类似神经猫这样快速传播又快速消失的 Html5 游戏数不胜数。

而就在最近有两则与 Html5 的消息相信是牵动了许多希望进入这个领域的游戏从业者的神经。

1、据游戏陀螺报道，基于微信的 HTML5 的一些小游戏的分享接口被微信封杀，主要是像 7K7K 这类型大战。腾讯欢迎开发小游戏团队和腾讯合作。

2、腾讯的广点通项目正在准备在除公众号、微店等项目之外进入游戏，Html5 成为首选，因为 Html5 目前而言只能依靠广告获得营收，同时这类小游戏的流量十分可观，难点在于 Html5 的流量都是瞬间爆发型，何时接入至今还没有解决办法。

Html5 手游从本质上来说是手机端的页游，但与在 PC 端相比，这类游戏的生命周期更短，且营收模式暂且单一，同时由于现在的移联网入口的分散导致只有类似微信、UC 这样超大流量的入口才能承载起一个平台。

但问题多不代表 Html5 游戏的未来就应该被唱衰，我们以前也从没想过在智能手机上，没有按键控制的手游会发展的这么迅猛。

Html5 的将成为手机游戏中一个尚未被开发的金矿，这一点毫无疑问。

那么在这下一波热点当中，会成为当年在 PC 端的叱咤风云的页游厂商的止血药吗?因为我们需要知道的是，在 2012 年的 CJ 上还在大放异彩的页游现在已经逐渐成为了游戏行业当中逐渐被遗忘的角色。

手游刚热电视游戏又来抢风口

微软似乎已经不再满足于自己游戏平台的定位，而是全面的打算打造游戏的全产业链，根据《华尔街日报》的最新报道，微软正在打算以 20 亿美元的价格来收购瑞典游戏开发商 Mojang AB。

自从 2009 年发布以来，Mojang 已售出逾 5000 万份《我的世界》，去年从该游戏和商品中获利逾 1 亿美元。这款游戏在 2012 年登陆了 Xbox 平台，去年来自 Xbox 版《我的世界》的营收占据了 Mojang 总营收的近三分之一。

微软对于电视游戏的加大投入无疑将在全球范围给给这个产业带来利好，而自从去年年中开始，新的一波电视游戏热正在中国慢慢衍生。

以 Xbox 入华为契机，国内的游戏厂商以及电视厂商均开始将目光纷纷投向电视游戏产业，无论是借 Xbox 生蛋，还是自主打造游戏终端设备，亦或是无差别式打造平台，中国的电视游戏产业正经历他最好的年代。

完美接连收购游戏资讯网站试图从内容口切入;百视通坐拥 Xbox 平台，竖起大旗招揽了一帮企业打造“家庭游戏产业联盟”;TCL、海信等电视厂商号称在智能电视上的广告、大数据、游戏、应用商店等领域达成战略联盟;其他诸如乐视、小米、中兴九城、360、阿里等亦在积极布局。

此前在手游领域没有获得成功的游戏创业团队也正在快速的调转方向，投入电视游戏的开发。

中国的游戏市场继手游之后开始出现第四股的力量，它承载了新的一波游戏致富梦。

徘徊的页游

9 月 9 日，巨人与 37 游戏宣布在页游领域合作，双方合作的首款产品也即将上市。

巨人副总裁吴盟表示，页游行业经过多年发展，仍在坚守的公司已不多，37 游戏在页游领域取得的巨大成绩有目共睹。各方拿出互补优势，持开放共赢心态，定能创造更好成绩。

这两家的合作表面看上去是一次简单的战略合作，资源共享，但在背后却影射了更多不一样的东西。

我们先来看看 37 游戏，在被顺荣股份收购时，顺荣股份给出的价格是 19.2 亿元占股 60%，整体估值约 33 亿元。

根据财务数据显示，37wan 在去年 1 月至 7 月之间，营收超过 8 亿元，净利润达 1.146 亿元，月均充值收入 1.05 亿元，月均付费用户 22 万，月均 ARPU476.48 元。

而艾瑞给出的《2013-2014 年中国网页游戏行业研究报告》显示，“2013 年 37 游戏营收 17.0 亿元，是除去腾讯系页游平台以外的最大网页游戏运营平台，37 游戏同比增长率为 188.1%，是整个网页游戏市场增长率的 2 倍”。

毫无疑问 37 游戏在页游领域占据着领先的地位，就在与巨人合作之前，发布的页游《大天使之剑》在 60 天的时间内流水突破 3.2 亿元。

37 游戏在页游领域的数据足够漂亮，但是领头羊的数据并不足以代表整个页游产业的问题。

目前游戏产业最大的明星是手游。巨人在 2012 年初发力页游，为此挖来动网先锋总裁吴盟负责页游，吴盟也是巨人首位 85 后副总裁。可时过进迁，页游可能早已不再是巨人战略当中最核心的部分。

在今年 CJ 期间，巨人总裁刘伟表示，巨人网络将以私有化为契机，正式进入二次创业阶段，而手游将是二次创业的主战场，目标是做出《征途》级别有影响力的手游产品。

即使是上述的 37 游戏也在今年起宣布将投入 15 亿资金发力手游市场，用于产品代理、开发团队扶持及推广资源购买等，预计有3~4 款自研游戏会在今年上半年推出。

反观页游，在 2010-2013 年是页游的黄金发展期，但到 2012 年底，页游的整体盘子依然没有突破百亿元大关，直到 2013 年营收才突破百亿达到 127 亿，可只有短短 3 年发展时间的手游也在去年达到了 112 亿元，2014 年手游的营收全面超越页游以成为既定的事实。

而再从市场份额去看，2013 年的页游市场份额为 15.4%，仅仅比 2012 年增长了 1.9 个百分点，页游的未来基本被锁死。

所以，巨人与 37 游戏的结盟表面去看是一次简单的合作，但背后显示的却是一次对于游戏新模式的探索，这种探索在页游整体增长缓慢的情况下显得尤为重要。

Html5 会成为强心针吗?

37 游戏与巨人的合作或许可以在一定程度上帮助这两家公司在页游领域获得进步，但这仅仅是在“打封闭”，面对页游下滑的趋势，页游厂商所需要的是开拓一条完整的道路，需要找到止血药。

目前来看 Html5 很可能将成为止血药。

一个很有趣的现象是，37 游戏在手游方面的布局其实很早，比如有一款产品去年就签了，直到今年 5 月份才发布。

“这半年以来，我们工作的重点在于建立完整的数据分析体系、锻炼服务团队，同时签约更多的产品，在这其间，最好的产品在网上的销量排名第九。”37 游戏的李逸飞说

但是 Html5 的手游与 PC 页游其实在很多方面有着契合程度，比如即开即玩、互动性、病毒式传播、玩家的进入门槛低等等。

当前一个新游戏动辄几百兆，即使游戏非常好，但是很多人可能连尝试的勇气都没有，大部分玩家还是喜欢轻松易上手的游戏。

多盟总裁张鹤说，“基于 HTML5 的即开即玩游戏符合手游的本质，将成为未来的主流。”

而根据板邓得到的消息，已经有很多有实力的页游厂商其实已经在秘密的在探索这个方向，页游厂商进入 Html5 的优势在于有一整套如何快速传播游戏的营销，以及对于即开即玩需求玩家的数据分析，接入 Html5 页游厂商可以实现无缝链接，甚至是简单的移植。

前段时间 Html5 手游的早期公司 Moblyng 倒闭了，但他的倒闭并不能说明它的失败，创始人 Putney 称“我们在业务的货币化上没有产生足够重视。”

Moblyng 成功地制作了一些游戏，可以让 facebook 上用户和手机上的用户一起玩同一个游戏，该公司称曾有超过 1000 万下载。

另外，在今年彻底引爆 Html5 的神经猫的游戏引擎为 Egret，二据 Egret 联合创始人马鉴介绍，Egret 团队成员都是页游出身。Egret 基于微软的 TypeScipt 语言编写，与 Flash 的 ActionScript 语言结构相似。

“中国有 40~45 万的 FLASH 开发者，即页游开发者，他们从 PC 端的页游生态系统向新一代的移动互联网的过渡中，不得不放弃已经掌握的知识资源，重新去学习 C 做原生。Egret 在 Visual Studio 上的插件工具 EgretVS，把所有 ActionScript、JavaScript、TypeScript 开发者，带入到移动游戏的开发领域，这也是我们选择 TypeScript 的原因。” 马鉴说。

综合这些来看，虽然 Html5 现在的产业链还不成熟，但这仅仅是早期，对于页游厂商来说，Html5 手游与 PC 页游有共存性，很有可能成为他们的一剂强心针。

本文链接

代码检测HTML5/CSS3新特性的浏览器支持情况

Sat, 06 Dec 2014 00:00:02 CST

伴随着今年10月底HTML5标准版的发布，未来使用HTML5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也是在逐渐支持，不能肯定说某个浏览器100%支持了HTML5。而且，IE11做了一个恶心的举动：在UA中去掉了“MSIE”标志，把appName改为了“Netspace”，并且开始支持-webkit-前缀的css属性，这是活生生要伪装成chrome的节奏。所以，HTML5/CSS3支持性的检测，还是靠特征检测（figure detection）或者说能力检测更好些。本篇就来介绍一下常用的检测方式都有哪些。

HTML5部分

检测HTML5新特性的方法主要有以下几种：

1. 检查全局对象（window或navigator）上有没有相应的属性名

2. 创建一个元素，检查元素上有没有相应的属性

3. 创建一个元素，检测元素上有没有方法名称，然后调用该方法，看能否正确执行

4. 创建一个元素，为元素的相应属性赋一个值，然后再获取此属性的值，看看赋值是否生效

由于不同浏览器的不同行为，检测一些特性的时候，可能会用到上述几个方法的组合，接下来用上面的方法做一下常用特性的检测：

canvas

function support_canvas(){
    var elem = document.createElement(’canvas’);
    return !!(elem.getContext && elem.getContext(’2d’));
}

一般来讲，创建canvas元素并检查getContext属性即可，但是在一些浏览器下不够准确，所以再检测一下elem.getContext(’2d’)的执行结果，就可以完全确定。以上代码摘自Modernizr： http://github.com/Modernizr/Modernizr/issues/issue/97/

关于canvas，有一点要补充的，那就是fillText方法，尽管浏览器支持canvas，我们并不能确切的确定它支持fillText方法，因为canvas API经历了各种修改，有一些历史原因，检测支持fillText的方法如下：

function support_canvas_text(){
    var elem = document.createElement(’canvas’);
    var context = elem.getContext(’2d’);
    return typeof context.fillText === ’function’;
}

video/audio

function support_video(){
    return !!document.createElement(’video’).canPlayType;
}

function support_audio(){
    return !!document.createElement(’audio’).canPlayType;
}

video和audio的写法相似。

要检测video/audio支持的资源格式，可以调用canPlayType方法来进行检查，具体如下：

unction support_video_ogg(){
    var elem = document.createElement(’video’);
    return elem.canPlayType(’video/ogg; codecs="theora"’);
}
function support_video_h264(){
    var elem = document.createElement(’video’);
    return elem.canPlayType(’video/mp4; codecs="avc1.42E01E"’);
}
function support_video_webm(){
    var elem = document.createElement(’video’);
    return elem.canPlayType(’video/webm; codecs="vp8, vorbis"’);
}

function support_audio_ogg(){
    var elem = document.createElement(’audio’);
    return elem.canPlayType(’audio/ogg; codecs="vorbis"’);
}
function support_audio_mp3(){
    var elem = document.createElement(’audio’);
    return elem.canPlayType(’audio/mpeg;’);
}
function support_audio_wav(){
    var elem = document.createElement(’wav’);
    return elem.canPlayType(’audio/wav; codecs="1"’);
}

要注意的是，canPlayType的返回值并不是布尔类型，而是字符串，取值有以下几种：

“probably”：浏览器完全支持此格式
“maybe”：浏览器可能支持此格式
“”：空串，表示不支持

localStorage

一般来讲，检查全局对象是否有localStorage属性即可，如下：

function support_localStorage(){
    try {
        return ’localStorage’ in window && window[’localStorage’] !== null;
      } 
    catch(e){
        return false;
    }
}

在一些浏览器禁用cookie，或者设置了隐私模式什么的情况，检查属性或报错，所以加在try语句中，如果报错了认为不支持。

另外，还有一种更严格的检查方法，检查相应方法是否支持，如下：

function support_localStorage(){
    try {
        if(’localStorage’ in window && window[’localStorage’] !== null){
            localStorage.setItem(’test_str’, ’test_str’);
            localStorage.removeItem(’test_str’);
            return true;
        }
        return false;
    } 
    catch(e){
        return false;
    }
}

webWorker

function support_webWorker(){
    return !!window.Worker;
}

applicationCache

function support_applicationCache(){
    return !!window.applicationCache;
}

geolocation

function support_geolocation(){
    return ’geolocation’ in navigator;
}

input标签新属性

input标签新增的属性包括：autocomplete、autofocus、list、placeholder、max、min、multiple、pattern、required、step，检测是否支持用上面提到的方法2即可，新建一个input标签，看是否有这些属性，以autocomplete为例：

function support_input_autocomplete(){
    var elem = document.createElement(’input’);
    return ’autocomplete’ in elem;
}

另外要特别注意list属性，因为它是与datalist标签连用的，所以检查的时候要一并检测datalist标签是否支持：

function support_input_list(){
    var elem = document.createElement(’input’);
    return !!(’list’ in elem && document.createElement(’datalist’) && window.HTMLDataListElement);
}

input标签新类型

这里的类型就是指type的取值，input新增的type值包括：search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color。检测这些值需要用上面提到的方法4，以number为例：

function support_input_type_number(){
    var elem = document.createElement(’input’);
    elem.setAttribute(’type’, ’number’);
    return elem.type !== ’text’;
}

这是一种较为简单的检查方法，因为严格来讲，浏览器会为不同的类型提供不同的外观或实现，例如chrome中range类型会长这样：

我们要确切的知道浏览器为该类型提供了对应的实现，才可以认为是“支持的”，要从这个方面检测是有难度的，各浏览器实现都不一。下面贴出Modernizr中的一个实现，供参考：检测email类型的实现：

function support_input_type_email(){
    var elem = document.createElement(’input’);
    elem.setAttribute(’type’, ’email’);
    elem.value = ’:)’;
    return elem.checkValidity && elem.checkValidity() === false;
}

为email类型设置了一个非法的value，然后手动调用校验方法，如果返回false，说明浏览器提供了该类型的实现，认为是支持的。

history

history虽说是HTML4就有的，但HTML5提供了新的方法，检测方法如下：

function support_history(){
    return !!(window.history && history.pushState);
}

webgl

function support_webgl(){
    return !!window.WebGLRenderingContext;
}

postMessage

function support_postMessage(){
    return !!window.postMessage;
}

draggable

HTML5的拖拽特性：

function support_draggable(){
    var div = document.createElement(’div’);
    return (’draggable’ in div) || (’ondragstart’ in div && ’ondrop’ in div);
}

webSocket

unction support_webSocket(){
    return ’WebSocket’ in window || ’MozWebSocket’ in window;
}

svg

function support_svg(){
    return !!document.createElementNS && !!document.createElementNS(’http://www.w3.org/2000/svg’, ’svg’).createSVGRect;
}

事件的支持性判断

通用方法：

检查事件的支持性，用上面提到的方法2就可以，创建一个元素，看元素上有没有对应的事件名称，下面是摘自Modernizr的实现：

isEventSupported = (function() {

      var TAGNAMES = {
        ’select’: ’input’, ’change’: ’input’,
        ’submit’: ’form’, ’reset’: ’form’,
        ’error’: ’img’, ’load’: ’img’, ’abort’: ’img’
      };

      function isEventSupported( eventName, element ) {

        element = element || document.createElement(TAGNAMES[eventName] || ’div’);
        eventName = ’on’ + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn’t implement Node interface), try generic element
          if ( !element.setAttribute ) {
            element = document.createElement(’div’);
          }
          if ( element.setAttribute && element.removeAttribute ) {
            element.setAttribute(eventName, ’’);
            isSupported = is(element[eventName], ’function’);

            // If property was created, "remove it" (by setting value to `undefined`)
            if ( !is(element[eventName], ’undefined’) ) {
              element[eventName] = undefined;
            }
            element.removeAttribute(eventName);
          }
        }

        element = null;
        return isSupported;
      }
      return isEventSupported;
    })()

touch事件

如果仅仅是检查touch事件是否支持，就没必要写上面那么多东西了，可以简单书写如下：

function support_touch_event(){
    return !!((’ontouchstart’ in window) || window.DocumentTouch && document instanceof DocumentTouch);
}

Mozilla还提供了一个媒体查询的语句用来检测touch的支持性：touch-enabled，可以在页面上插入一个带有此媒体查询的元素来判断是否支持touch事件。参考： http://www.quirksmode.org/css/mediaqueries/touch.html

不过我们做移动开发一般都只考虑webkit内核了，Mozilla的方式就不写了，如果需要请参考Modernizr源码。

css3部分

通用方法

css3属性支持度的检测，主要通过上面方法提到的2和4来检查，不过我们要检查的是元素的style属性。另外一个要提的就是浏览器私有前缀，在现阶段我们用css3属性大部分是要写前缀的，因为各浏览器还未完全支持。我们用到的前缀有：-webkit-、-ms-、-o-、-moz-，至于前缀-khtml-，这是Safari早期使用的，现在基本也没有人再用它了，所以进行检测的时候就把它省去了。Modernizr移除了此前缀的检测，详见： https://github.com/Modernizr/Modernizr/issues/454

通用代码如下：

var support_css3 = (function() {
   var div = document.createElement(’div’),
      vendors = ’Ms O Moz Webkit’.split(’ ’),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         } 
      }
      return false;
   };
})();

3D变形

css3 3D变形的检测稍微复杂些，首先要支持perspective属性，其次要支持transform-style的值为preserve-3d。用方法4的方式无法检测出来，需要借助媒体查询的方式，代码如下：

function support_css3_3d(){
    var docElement = document.documentElement;
    var support = support_css3(’perspective’);
    var body = document.body;
    if(support && ’webkitPerspective’ in docElement.style){
        var style = document.createElement(’style’);
        style.type = ’text/css’;
        style.innerHTML = ’@media (transform-3d),(-webkit-transform-3d){#css3_3d_test{left:9px;position:absolute;height:3px;}}’;
        body.appendChild(style);
        var div = document.createElement(’div’);
        div.id = ’css3_3d_test’;
        body.appendChild(div);

        support = div.offsetLeft === 9 && div.offsetHeight === 3;

    }
    return support;
}

需要借助上面定义好的support_css3方法来检测perspective。

基本常用检测的就这些了，本文中一部分代码是网上搜来的，还有一部分是从Modernizr源码中抽离出来的。如文中叙述有误，欢迎指正。

在实际开发中，推荐直接使用Modernizr进行检测，它已经封装的非常漂亮了。但是如果你仅仅检测几个属性，或者不想因加载额外的库而浪费性能，就可以使用上述代码进行单个检测。

IT瘾html5推荐

html5选择摄像头 android - Enable rear camera with HTML5 - Stack Overflow

有支持M3U8格式的HTML5播放器吗？ - 知乎

功能列表：

移动端 HTML5 video 视频播放实践

一、项目背景

二、了解 video 标签一些基本的属性

三、了解 video 标签一些基本的方法

iOS WebView 中异步添加 video 标签无法播放。

iPhone6s iOS WebView 中异步添加 video 标签需要点击两次才能播放

四、最后总结

参考资料

让ie6 7 8 9支持html5 websocket

html5实现本地图片预览功能

var reader = new FileReader()；

objectURL = URL.createObjectURL(blob); //参数blob：是用来创建 URL 的 file 对象或者 Blob 对象​

三天学会HTML5——SVG和Canvas的使用

Lab1—— 使用Canvas

Lab 1.1 使用 Path

Lab 1.1.2 使用Multiple Begin Path创建Path

Lab1.1.3 理解ClosePath

Lab1.1.4 理解Fill

Lab1.1.5 画曲线

Lab 1.2 使用Rectangle

Lab1.2.2 清除矩形

Lab 1.3 使用渐变色

Lab1.5 使用Text

Lab 1.7 旋转

Lab 1.8 转换

Lab 1.9 保存和重置Canvas 的状态

Lab1.11 使用Canvas 生成动画

Lab 2 使用SVG 工作

Lab2.1 画出多种形状

Lab 2.2SVG 动画

SVG VS Canvas

HTML5数据可视化第二弹：打造最美3D机房

目标效果图

WebGL基本场景搭建

对象封装

地板和斜坡

走廊桌

墙体

门

窗

外侧墙

植物

机柜

设备

电视机

总结

HTML5游戏——只是趋势 未到爆点

自己的HTML5 播放器 - __constructor

技术干货分享：如何选择 HTML5 游戏引擎

玩转HTML5移动页面（动效篇）

玩转HTML5移动APP页面（优化篇）

（1） 动画雪碧图

（2）图片压缩

（3）多终端兼容

（4）交互提示

（5）分享接口

（5）SEO搜索引擎优化

（6）无障碍

中国和美国的HTML5市场差距有多少？

Html5 客户端存储安全

【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

一些有用的HTML5 pattern

type="tel" 和 type="number" 的区别

type="tel"

type="number"

pattern属性

实例

简单的数字验证

常用的正则表达式

浏览器支持

HTML5本地裁剪图片

先上效果图：

实现图片裁剪的init函数：

实现handleFiles，获取文件，读取文件并生成url

实现paintImage函数

实现cutImage方法

`var reader = new FileReader()；`

`objectURL` `=` URL.createObjectURL(blob); //参数blob：是用来创建 URL 的 `file` 对象或者 `Blob` 对象

HTML5游戏——只是趋势未到爆点

（1）动画雪碧图

Youtube网站正式全面使用HTML5