效果图：

注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（HBuilder有集成服务器或者使用wampmanager）。

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <style type="text/css">

    #canv{

        border:1px solid red;

    }

    </style>

</head>

<body>

    <video id="sourcevid" autoplay="true" loop="true">

            <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>

            <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>

    </video>

    <canvas id="canv" width="640" height="360"></canvas>

    <script type="text/javascript">

    var canv=document.getElementById('canv');

    var video=document.getElementById('sourcevid');

    var ctx=canv.getContext("2d");

        function run(){

        //在画布里绘制出sourcevid

         ctx.drawImage(video,0,0);

         window.requestAnimationFrame(run);

         var imageData = ctx.getImageData(0,0,400,400);

         var d = imageData.data;//保存的是红绿蓝透明度的通道的值

         for(var i = 0; i < d.length; i += 4) {

                var verage = (d[i] + d[i+1] + d[i+2])/3;

                var verage1 = 0.299 * d[i] + 0.587 * d[i+1] + 0.114 * d[i+2]

                d[i] = d[i+1] = d[i+2] = verage1;

            }

            // putImageData() 将图像数据放回画布

            ctx.putImageData(imageData,0,0);

        }

        run();

    </script>

</body>

</html>

HTML、canvas、video灰度的更多相关文章

  1. Canvas+Video打造酷炫播放体验

    一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元 ...

  2. Canvas 图片灰度

    我们可以通过下面几种方法,将其转换为灰度: 1.浮点算法:Gray=R*0.3+G*0.59+B*0.11 2.整数方法:Gray=(R*30+G*59+B*11)/100 3.移位方法:Gray = ...

  3. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  4. ---JS canvas学习笔记

    context的fillStyle属性 fillStyle=color | gradient | image | canvas |video strokeStyle也有上述属性. 1.color:#f ...

  5. Canvas 属性,方法

      context . restore() //弹出堆最上面保存的绘图状态 context . save() //在绘图状态堆上保存当前绘图状态 绘图状态可以看作当前画面应用的所有样式和变形的一个快照 ...

  6. canvas API ，通俗的canvas基础知识（五）

    前几期讲的都是路径图形的绘图,这节我们要讲的是如何在画布上操作图片,因为图形画不了漂亮妹子(画图高手忽略不计),想画美女怎么办?跟我来: 想要在画布中插入一张图片,我们需要的方法是这位大侠: draw ...

  7. Canvas 笔记（持续更新中）

    1.从线条开始 HTML <canvas id="canvas"></canvas> Javascript var canvas=document.getE ...

  8. canvas填充样式

    填充样式主要针对fillStyle.fillStyle除了可以赋值为color,还可以赋值渐变色,包括线性渐变色和径向渐变色,还是和css3里的内容类似. 一.线性渐变 1.设置线性渐变的填充样式 设 ...

  9. canvas的api小结

    HTML <canvas id="canvas"></canvas> Javascript var canvas=document.getElementBy ...

随机推荐

  1. BZOJ 2286: [Sdoi2011]消耗战

    2286: [Sdoi2011消耗战 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2082  Solved: 736[Submit][Status] ...

  2. CSRF攻击原理以及防御

    一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSR ...

  3. Java注释@Override

    @Override指定方法覆载.它可以强制一个子类必须覆盖父类的方法. package ch14; /** * Created by Jiqing on 2016/12/27. */ public c ...

  4. 习题-第1章了解ASP.NET MVC

    一.选择题 1.ASP.NET MVC自2007年首次公布预览以来,作为(    )的替代品,普及度已明显提高,现在很多大型Web应用程序都是使用这一技术构建的. A.ASP    B.ASP.NET ...

  5. 查看Msi文件内容

    1通过msiexec命令解压msi包 msiexec.exe /a c:\msi\installer.msi /qb targetdir=d:\msi\installer 2 使用Orca查看. Or ...

  6. jquery实现百度类似搜索提示功能（AJAX应用）

    有时候觉得百度那个输入内容就有提示的工具很神奇,它究竟是怎么做到的呢?以前在一个进销存系统中也做过这么个功能,但是远远不及百度的功能强大,百度可以输入首字母,关键字拼音,或关键字都可以匹配,有时在想, ...

  7. 在chrome console加入jquery库

    var jq = document.createElement('script'); jq.src = 'http://libs.baidu.com/jquery/1.9.1/jquery.min.j ...

  8. iOS开发UI篇—transframe属性（形变）

    iOS开发UI篇—transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两 ...

  9. shell使用随笔

    001 对文件某一列求和 awk '{sum += $collum};END {print sum}' /path/to/your/file 2 3 3 5 假设文件内容如上所示: # awk '{s ...

  10. yii2-user

    https://github.com/dektrium/yii2-user 安装 : composer require "dektrium/yii2-user:0.9.*@dev" ...