效果图：

注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（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. 9----Lua中的面向对象

    什么是面向对象? 使用对象.类.继承.封装.消息等基本概念来进行程序设计 面向对象最重要的两个概念就是:对象和类 对象是系统中用来描述客观事物的一个实体,它是构成系统的一个基本单位 一个对象由一组属性 ...

  2. java高薪之路__001_类

    Java中内部类分四种:成员内部类.局部内部类.静态内部类和匿名内部类.要注意静态内部类的调用方式与其他不同,采用的是类似调用类中的静态属性.静态方法的方式 Multi Level 调用不同类中的相同 ...

  3. akka笔记

    Actor UntypedActor actor的基类,继承并实现onReceive方法就可以得到一个Actor. Props 配置类,用Props.create可以创建一个按指定配置生成的Actor ...

  4. linux笔记：用户和用户组管理-用户配置文件

    用户信息文件(/etc/passwd): 影子文件(/etc/shadow) 组信息文件(/etc/group)和组密码文件(/etc/gshadow):

  5. c-free

  6. break和continue的区别

    break是结束整个循环体,continue是结束单次循环

  7. Linux系统资源监控命令

    转自http://www.51testing.com/html/16/271416-149128.html 衡量CPU性能的指标: 1,用户使用CPU的情况:CPU运行常规用户进程CPU运行niced ...

  8. juery 实现下拉框多选 jquery-multiselect

    效果: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href=" ...

  9. java文件上传下载

    文件上传首先要引入两个核心包 commons-fileupload-1.2.1.jar commons-io-1.4.jar 下面是对文件上传和下载的一些代码做的一个简单封装,可以方便以后直接使用[使 ...

  10. C# 技巧(1) C# 转换时间戳

    经常发现很多地方使用一个时间戳表示时间.比如: 1370838759  表示 2013年6月10日 12:32:39. 我们就需要一个工具,方便地转换这种时间格式 什么是时间戳? 时间戳, 又叫Uni ...