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. python数组查找算法---bisect二分查找插入

    1 实例 这个模块只有几个函数, 一旦决定使用二分搜索时,立马要想到使用这个模块 [python] view plaincopyprint? import bisect L = [1,3,3,6,8, ...

  2. 利用fiddler给android模拟器抓包

    启动模拟器 setting---wireless&networks----mobile networks----access pointnames -------------------- 然 ...

  3. php 命名空间的目的

    php引入命名空间的目的,就是为了防止不同的文件 标识符同名的问题,比如类.函数.变量同名导致冲突的问题.这才是根本的根本,了解指点,带着这个观念去学习php命名空间的相关知识,就不会云里雾里了,会比 ...

  4. Codeforces #377 Div2

    打得还不错的一场CF,题目质量也很高,今后还要继续努力 A题: 题意:给定一个数k,让其乘一个最小的数,使乘得以后的数要不被10整除,要不减去r以后被10整除,求这个最小的数 #include < ...

  5. ip识别运用

    tcp/ip协议中,专门保留了三个IP地址区域作为私有地址,其地址范围如下: 10.0.0.0/8:10.0.0.0-10.255.255.255 172.16.0.0/12:172.16.0.0-1 ...

  6. HAProxy 7层 负载均衡

    系统 CentOS 5.8 x64 wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.26.tar.gz cd haproxy-1.3.2 ...

  7. losbyday Linux下的强大工具之一akw（转）,Shell必备

    简单使用:awk :对于文件中一行行的独处来执行操作 .awk -F :'{print $1,$4}'   :使用‘:’来分割这一行,把这一行的第一第四个域打印出来 .  详细介绍:AWK命令介绍 a ...

  8. (简单) POJ 2387 Til the Cows Come Home，Dijkstra。

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  9. linux查看系统负载

    摘要:number of cores = max load , linux 系统负载高 如何检查? 1:load Average    1.1:什么是Load?什么是Load Average?    ...

  10. ZOJ 3929 Deque and Balls

    答案=所有情况中总共递减次数*2 放完i个和放完i-1个之间的递减次数是可以递推的. 有一部分是放完i-1个之后产生的,还有一部分是放完第i个之后新产生的. 注意减去多加的部分. 2的i次方可以打个表 ...