效果图：

注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（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. Linux Shell 批量更换文件名或后缀名

    把下列所有.c的文件名修改为.cc rename .c .cc *.c

  2. aws在线技术峰会笔记-基于AWS的Devops最佳实践

    AWS CodeCommit AWS CodePipeline 可以和github集成 可以支持蓝绿部署 微服务架构, API Gateway进行转发

  3. 《BI那点儿事》数据流转换——模糊分组转换

    在模糊查找中我们提到脏数据是怎样进入到表中的事情,主要还是由于一些“Lazy-add”造成的.这种情况我们的肉眼很容易被欺骗,看上去是同一个单词,其实就差那么一个字母,变成了两个不同的单词.一个简单的 ...

  4. iOS - Apache Tomcat WebServer 服务器配置

    前言 提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提前准备好的软件: apache-tomcat-6.0.45.tar.gz eclip ...

  5. jsp项目与mysql链接

    因为毕设是地下车库管理系统,所以打算学习jsp进行开发~ 今天主要是[新建网站项目+mysql链接],在此篇之前所做的工作:tomcat服务器配置,mysql数据库的安装与启用(在之后的开发中可以使用 ...

  6. Qt工程转化为Vs工程

    cmd中输入: qmake -tp vc XXX.pro 一般需要将qmake的路径配置到系统环境变量中去...

  7. tomcat通过conf-Catalina-localhost目录发布项目详解 摘自：http://www.cnblogs.com/iyangyuan/archive/2013/09/12/3316444.html

    Tomcat发布项目的方式大致有三种,但小菜认为通过在tomcat的conf/Catalina/localhost目录下添加配置文件,来发布项目,是最佳选择. 因为这样对tomcat的入侵性最小,只需 ...

  8. guava学习--集合1

    Lists: 其内部使用了静态工厂方法代替构造器,提供了许多用于List子类构造和操作的静态方法,我们简单的依次进行说明,如下: newArrayList():构造一个可变的.空的ArrayList实 ...

  9. Java:Collection List Set

    Java:集合 常见集合:List Set List 特点:元素是有序的,而且元素可以重复,因为该集合体系有索引. 常见的三个子类:ArrayList.LinkedList.Verctor List集 ...

  10. PLSQL开发笔记和小结(转载)

    *****************************************   PLSQL基本结构 ***************************************** 基本数据 ...