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. Transport layer and Network layer

    http://stackoverflow.com/questions/13333794/networking-difference-between-transport-layer-and-networ ...

  2. Naive Bayes在mapreduce上的实现

    Naive Bayes是比较常用的分类器,因为思想比较简单.之所以说是naive,是因为他假设用于分类的特征在类确定的条件下是条件独立的,这个假设使得分类变得很简单,但会损失一定的精度. 具体推导可以 ...

  3. cinder /etc/lvm/lvm.conf 注意点

    在cinder节点,cinder-volume使用的磁盘(/dev/sdb),需要在/etc/lvm/lvm.conf中配置: devices {...filter = [ "a/sdb/& ...

  4. USACO Section 1.1 Greedy Gift Givers 解题报告

    题目 问题描述 有若干个朋友,朋友之间可以选择互相赠送一些有价值的礼物.一个人可以选择将一部分钱分给若干个朋友,例如某人送给其他两个人钱,总共赠送3元,两个人平均分,原本应该是每人1.5元,但是只能取 ...

  5. ecos新命令

    创建myapp,在myapp里创建lib/command目录 新建一个文件hello.php <?php /** * myapp_command_hello(myapp->app名称,co ...

  6. JUnit----单元测试

    为什么进行单元测试? 1. 重用测试, 应付将来实现的变化. 2. 明确指定我的东西是没问题的. Failure, error的区别? Failure只测试失败, Error指程序本身出错 1. ne ...

  7. strlen sizeof strcat strcpy区别

      strlen(p): 能计算出p指向字符串的长度(以当前p的位置开始),不包含终止字符'\0': p可以声明为char* p或者char p[],这两种形式strlen均能正确计算. sizeof ...

  8. ajax原理图解

    Ajax 原理图解 摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php Ajax其实已经使用很久了,但一直也没有时间正经的找本 ...

  9. PHP文件夹操作2

    mkdir("路径文件名"); 创建文件夹 imdir("路径文件名"); 删除文件夹(只能删除空的文件夹) rename("路径",&qu ...

  10. iOS开发——点击图片全屏显示

    点击图片,全屏显示,然后再点击屏幕一下,返回. 没啥难的,直接上代码: // //  ViewController.m //  Demo-hehe // //  Created by yyt on 1 ...