效果图：

注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（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. IOS开发数据库篇—SQLite模糊查询

    IOS开发数据库篇—SQLite模糊查询 一.示例 说明:本文简单示例了SQLite的模糊查询 1.新建一个继承自NSObject的模型 该类中的代码: // // YYPerson.h // 03- ...

  2. WebSocket实战之————GatewayWorker使用笔记例子

    参考文档:http://www.workerman.net/gatewaydoc/ 目录结构 ├── Applications // 这里是所有开发者应用项目 │ └── YourApp // 其中一 ...

  3. 使用Android点击按钮跳转页面

    1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中 ...

  4. Spring No mapping found for HTTP request with URI错误

    访问不了,结果是这里的坑.自己记录下

  5. xcode7 打开工程错误 This Document requires xcode8.0 or later.

    xcode7 打开工程错误 This Document requires xcode8.0 or later. 场景: xcode7创建的工程,后来安装了xcode8.0,用8打开7的工程跑了一下: ...

  6. GIT ON WINDOWS

    https://help.github.com/articles/generating-an-ssh-key/

  7. “LC.exe”已退出，代码为 -1

    造成这个问题的原因一般是引入了第三方插件,自己遇到的问题是引入了devexpress...... 1.找到Properties文件夹licenses.licx文件,然后右键选择删除就可以了,调试运行正 ...

  8. Android开发--Layout元素

    1.TF类型 android:layout_alignParentStart="true/flase":贴紧父元素的左边缘 android:layout_alignParentEn ...

  9. ASP.NET MVC ActionResult的其它返回值

    一.ascx页面 场景:要返回代码片断,比如Ajax返回一个子页 我们先新建一个Action public ActionResult Ascx() { return PartialView(); } ...

  10. ios基础篇（十四）——UITableView（二）属性及基本用法

    上一篇说了UITableView的重用机制,让我们对UITableView有了简单了解,下面说说UITableView的属性及常见方法. 一.属性 1.frame:设置控件的尺寸和大小 2.backg ...