技术开发 频道

HTML5炫酷体验:Canvas Video雷人视频

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

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

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


<video src="movie.ogg" controls="controls">
</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 plain
public void translate (float dx, float dy)
Since: API Level
1
Preconcat the current matrix
with the specified translation
Parameters
dx  The distance
to translate in X
dy  The distance
to translate 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页的处理过程。 对于同步页来说,整个过程从头到尾连续执行一遍就行了,这比较容易理解。但是对于异步页来说,它必须要拆分成二个阶段, 以下图片反映了异步页的页面生命周期。注意右边的流程是代表异步页的。

1
相关文章