createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

ImageDataObject.data.length = ImageDataObject.width*ImageDataObject.height*4;

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

有两个版本的 createImageData() 方法：

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

var imgData=context.createImageData(imageData);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>createImageData</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='400'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        // 从10,10坐标开始绘制整个图片

        ctx.drawImage(img, 10, 10);

        var imgData = ctx.getImageData(50, 50, 200, 200);

        var imgData01 = ctx.createImageData(imgData);

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

            imgData01.data[i + 0] = 255;

            imgData01.data[i + 1] = 0;

            imgData01.data[i + 2] = 0;

            imgData01.data[i + 3] = 255;

        }

        ctx.putImageData(imgData01, 10, 260);

        var imgData02 = ctx.createImageData(100, 100);

        for (i = 0; i < imgData02.width * imgData02.height * 4; i += 4) {

            imgData02.data[i + 0] = 255;

            imgData02.data[i + 1] = 0;

            imgData02.data[i + 2] = 0;

            imgData02.data[i + 3] = 155;

        }

        ctx.putImageData(imgData02, 220, 260);

    };

    </script>

</body>

</html>

Canvas createImageData的更多相关文章

  1. [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  2. javascript canvas全部API

    HTMLCanvasElement//canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可绘制的上下文 t ...

  3. js封装、简单实例源码记录

    1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = d ...

  4. （私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）

    [开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0Aj9y ...

  5. HTML5 Canvas ( 创建图形对象 ) createImageData

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

  6. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  7. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  8. 相识HTML5 canvas

    Canvas是HTML的API,我们可以用它在网页中实时的来生成图像. 文章导读 1.必备技能 2.用于画图的函数 例子: -会话气泡-    -心形-    -钟表-      -星球里的星星- - ...

  9. 使用canvas截图或者改变灰度

    简述 html5新添加的canvas API可以让我们对画布进行开发应用,典型的是可以使用canvas截图或者 手工绘制“迷你图”(即嵌入在文本中的高清小图片). 实现截图的方法很简单,就是创建一个c ...

随机推荐

  1. HDU 5176 The Experience of Love 带权并查集

    The Experience of Love Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/O ...

  2. CCS设计手段——相对定位

    1.认识相对定位 相对定位就是让元素相对自己原来的位置进行位置调整. 2.相对定位的本质特性 不脱标,老家留坑,形影分离. 3.用途 ①微调位置 ②做绝对定位的参考,子绝父相 4.相对定位的定位置 相 ...

  3. ACM录 之 输入输出。

    —— 简单介绍一下ACM里面的输入输出... —— 主要说C++的输入输出(其实其他的我不会...). —— C++里面有输入输出流,也就是cin和cout,用起来也算是比较方便吧... —— 但是, ...

  4. Windows Azure Storage Client Library 2.0 入门

    入门连接如下: http://gauravmantri.com/2012/11/17/storage-client-library-2-0-migrating-table-storage-code/

  5. psql命令

    原文:http://blog.csdn.net/smstong/article/details/17138355 psql# shell 环境下,查看当前所在的数据库的命令是: select  cur ...

  6. ckeditor_3.6.6.2+CKFinder2.0.2配置

    一.首先工具的下载,找到相应的版本进行下载     ckeditor_3.6.6.2+CKFinder2.0.2 http://ckeditor.com/download      打开war文件,然 ...

  7. 在Action类中获得HttpServletResponse对象的四种方法

    在struts1.xAction类的execute方法中,有四个参数,其中两个就是response和request.而在Struts2中,并没有任何参数,因此,就不能简单地从execute方法获得Ht ...

  8. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  9. mysql 千万量级的表的优化

    参考: 一  大的优化方向: 数据结构优化,慢查询优化,索引优化,mysql参数设置优化 数据结构优化:先读写分离.再垂直拆分.再水平拆分! 说3点 1. 设计合适的索引,基于主键的查找,上亿数据也是 ...

  10. TimeDelta.total_seconds() in Python2.6-

    Python 的日期操作真是无力吐槽. 如果在做日期相加减时使用TimeDelta对象,2.7及以后的TimeDelta有total_seconds()方法获取总秒数,而2.6之前没有该方法,且众所周 ...