html5 canvas播放视频,HTML5炫酷体验：Canvas Video雷人视频

【IT168 技术】直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件(比如 Flash)来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。如：

Canvas+Video

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。

drawImage函数有三种函数原型：

drawImage(image, dx, dy)

drawImage(image, dx, dy, dw, dh)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。

dx和dy是image在canvas中定位的坐标值;dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值;

sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。

所以这使酷炫播放体验有了实现的可能。

理解canvas.translate和canvas.scale

很多人对于canvas.translate(x,y)的理解有的错误，之前一直以原点(0,0)为基准点，作用就是移动原点，默认的原点(0，0)是在屏幕左上角的，你可以通过translate(x，y)把点(x，y)作为原点，就一直以为这个(x,y)就是新的坐标原点。但看一下API就会知道，这种理解是不对的，

不过API确实容易误导大家：

view plainpublicvoid translate (float dx, float dy)

Since: API Level1Preconcat the current matrixwiththe specified translation

Parameters

dx  The distancetotranslate in X

dy  The distancetotranslate in Y

其实是原来的原点分别在x轴和y轴偏移多远的距离，然后以偏移后的位置作为坐标原点。也就是说原来在(100,100),然后translate(1，1)新的坐标原点在(101,101)而不是(1,1)

canvas.scale：

canvas.scale提供了放大缩小倒置等功能。比如Y倒置：canvas.scale(1，-1)

核心代码

canvas.setAttribute('height', Math.floor(video.height));canvas.setAttribute('width', Math.floor(video.width));ctx.translate(0, canvas.height );

ctx.scale(1,-1);

ctx.globalAlpha=0.3;

ctx.drawImage(video,0,0, video.width, video.height,0,-canvas.height/2, canvas.width, canvas.height);

对于这个包装类来说，最关键还是MyHttpAsyncResult的实现，它是异步模式的核心。

ASP.NET 异步页的实现方式

从上面的异步HttpHandler可以看到，一个处理流程被分成二个阶段了。但Page也是一个HttpHandler，不过，Page在处理请求时， 有着更复杂的过程，通常被人们称为【页面生命周期】，一个页面生命周期对应着一个ASPX页的处理过程。 对于同步页来说，整个过程从头到尾连续执行一遍就行了，这比较容易理解。但是对于异步页来说，它必须要拆分成二个阶段， 以下图片反映了异步页的页面生命周期。注意右边的流程是代表异步页的。