用canvas 实现同步video播放器


zhisat 时间:2018-06-30 浏览量:269 作者:zhisat


 标签<canvas id="canvas" width="800" height="475"  style="width:100%"></canvas>

标签

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确实容易误导大家:

1
2
3
4
5
6
7
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)

 

 

核心代码

1
2
3
4
5
6
7
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);




文章对我是否有用?



上一篇:世界杯买球网站-2018俄罗斯世界杯完整赛程
下一篇米店,米店金融app应用下载




ICP备14006799号 Copyrigh ©1997-2018 新音网 版权所有