效果图：

注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（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. Vector成员为指针时要注意的问题

    vector的复制是浅复制,所以复制一个包含动态内存的变量的对象的话就会出问题. 解决办法:自己写类的复制构造函数,为新对象的指针开辟新的内存空间. 但当vector离开作用域之后,只会把其成员所占的 ...

  2. python——初识socket

    什么是socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链 ...

  3. linux修改密码的几种方法

    1.  启动电脑 ,进入grub模式.  也就是下面这个模式: 按下e键,进入下面这个画面.... 选第二个(kernel的那个):  然后按下e键之后进入 下面这个版面: 之后敲入  single ...

  4. JavaScipt 源码解析 数据缓存

    常见的内存泄露的几种情况: 循环引用 JavaScript闭包 DOM插入 一个DOM对象被一个JavaScript对象引用,同时又引用同一个或其他的JavaScript对象,这个DOM对象可能回引发 ...

  5. python学习------dictionary和set

    一.dictionary 1.字典的形式:a={‘key’:value,‘key1’:value,................} 2.字典的的key不能重复,是一个不可变对象 3.字典的的查找和添 ...

  6. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

  7. android 中theme样式的解释

    android:theme="@android:style/Theme.Dialog" : Activity显示为对话框模式 android:theme="@androi ...

  8. 分治法求2n个数的中位数

    问题:设X[0:n-1]和Y[0:n-1]为两个数组,每个数组中含有n个已排好序的数.试设计一个O(logn)时间的分治算法,找出X和Y的2n个数的中位数 思想: 对于数组X[0:n-1]和Y[0:n ...

  9. apanda安装

  10. 使用OpenFileDialog会更改默认程序目录

    这个问题可能只有在特定的程序中会发现:当我们在程序中使用相对路径时是依赖于当前目录的.所以在使用类似代码: XElement rootNode = XElement.Load(@"zips/ ...