16、HTML5 媒体与画布及 Web Workers 应用

最新推荐文章于 2025-11-15 12:49:17 发布

s1t2u3

最新推荐文章于 2025-11-15 12:49:17 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5视频权威指南：从入门到精通文章标签： HTML5 Canvas Web Workers

本文链接：https://blog.youkuaiyun.com/s1t2u3/article/details/150845027

HTML5视频权威指南：从入门到精通专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

HTML5 媒体与画布及 Web Workers 应用

1. 绘制文本作为视频遮罩

我们可以使用文本作为视频的遮罩，让文本的填充内容为视频。以下是实现代码：

<canvas id="canvas" width="320" height="160"></canvas> 
<video style="display: none;"> 
  <source src="HelloWorld.mp4"  type="video/mp4"> 
  <source src="HelloWorld.webm" type="video/webm"> 
  <source src="HelloWorld.ogv"  type="video/ogg"> 
</video> 
<script> 
  window.onload = function() { 
    initCanvas(); 
  } 
  var context, video; 
  function initCanvas() { 
    video = document.getElementsByTagName("video")[0]; 
    canvas = document.getElementsByTagName("canvas")[0]; 
    context = canvas.getContext("2d"); 
    // paint text onto canvas as mask 
    context.font = 'bold 70px sans-serif';