<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        canvas{

            width: 4rem;

            float: left;

            border: 1px solid black;

        }

        canvas:nth-child(2){

            float: right;

        }

        button{

            float: left;

            padding: .1rem .2rem;

            font-size: .7rem;

        }

    </style>

</head>

<body>

    <canvas id="canvasA" width="500" height="400"></canvas>

    <canvas id="canvasB" width="500" height="400"></canvas>

    <button id="filter">复制</button>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvasA = $('#canvasA')[0];

    var cxtA = canvasA.getContext('2d');

    var canvasB = $('#canvasB')[0];

    var cxtB = canvasB.getContext('2d');

    /**

     * 获取canvas画布的内容 getImageData

     * 内容放回到canvas画布 putImageData

     * 获取ImgData的每一个像素 ImgData.data

      * getImageData(起始点的横坐标, 起始点的纵坐标, 获取的宽度, 获取的高度)

     * putImageData(绘制点的横坐标, 绘制点点纵坐标, imgData的起始点横坐标, imgData的起始点纵坐标, 宽度, 高度)

     */

    var img = new Image();

    img.src = "../img/background_2.jpg";

    img.onload = function(){

        cxtA.drawImage(img, 0, 0, canvasA.width, canvasA.height);

    }

    $('#filter').on('click', function(){

        var imgDataA = cxtA.getImageData(0, 0, canvasA.width, canvasA.height);

        var pxData = imgDataA.data;  //获取每一个像素

        for(var i = 0; i < canvasB.width * canvasB.height; i++){

            //灰度滤镜

            var r = pxData[4*i+0];

            var g = pxData[4*i+1];

            var b = pxData[4*i+2];

            //计算灰度的公式

            var grey = 0.3*r + 0.59*g + 0.11*b;

            pxData[4*i+0] = grey;

            pxData[4*i+1] = grey;

            pxData[4*i+2] = grey;

        }

        cxtB.putImageData(imgDataA, 0, 0, 0, 0, canvasB.width, canvasB.height);

    });

</script>

 

HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  2. canvas上的像素操作(图像复制，细调)

    canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...

  3. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  4. HTML5 Canvas一些常用的操作

    粗略的Canvas API 1. context var context = canvas.getContext('2d'); 2.Canvas state context.save();//将当前状 ...

  5. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

随机推荐

  1. js循环总结

    js原生的循环有两种,一般的for循环和for...in循环.还有一种常用jQuery.each()循环. 一. js原生循环 a. for循环,代码如下: var myArray = [1,2,3] ...

  2. ES6必知必会 （一）—— 变量声明和结构赋值

    本文章属于个人对es6一些比较常用的语法的总结归纳,其主要参考阮一峰大神的<a href="http://es6.ruanyifeng.com//">ECMAScrip ...

  3. kettle的资源库

    在kettle中的转换或者作业等资源的存储的仓库称为资源库:分为文件资源库.数据库资源库. 一个转换或者作业可以属于某个资源库或者一个单独的文件形态存在. 一.数据库资源库 1.1在mysql中创建一 ...

  4. [脚本] 一个用于BMP到EPS转换的BAT脚本实现(需要安装bmeps)

    最近用LaTeX写文章, 图片需要使用eps格式. 如果你安装了bmeps这个工具(一般你装了CTeX就自带这个工具的), 可以在需要转换的目录打开CMD窗口, 然后输入: bmeps -c a.jp ...

  5. winform 程序调用及参数调用

    调用程序: // 新轮廓 -> 调用轮廓扫描程序        private void toolStripMenuItem9_Click(object sender, EventArgs e) ...

  6. winform 子窗体刷新父窗体的数据

    建一个接口 比如 iMainForm接口内声明个方法 比如 Refresh()主窗体 实现这个接口 主窗体打开子窗体时这样写 子窗体.Owner = this;子窗体.ShowDialog(); -- ...

  7. hadoop框架结构介绍

    近年,随着互联网的发展特别是移动互联网的发展,数据的增长呈现出一种爆炸式的成长势头.单是谷歌的爬虫程序每天下载的网页超过1亿个(2000年数据,)数据的爆炸式增长直接推动了海量数据处理技术的发展.谷歌 ...

  8. 比较全面的MySQL优化参考(转)

    上篇:) http://imysql.com/2015/05/24/mysql-optimization-reference-1.shtml 下篇:) http://imysql.com/2015/0 ...

  9. ask 调用时间标签

    织梦时间调用标签大全(2012-08-03 12:50:13) 转载▼   分类: 织梦 织梦首页时间标签1,11-20 样式([field:pubdate  function='strftime(& ...

  10. 【Spring环境搭建】在Myeclipse下搭建Spring环境-web开发

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" ...