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. thinkphp 5.0 模块设计

    模块设计 5.0版本对模块的功能做了灵活设计,默认采用多模块的架构,并且支持单一模块设计,所有模块的命名空间均以app作为根命名空间(可配置更改). 目录结构 标准的应用和模块目录结构如下: ├─ap ...

  2. HTML知识点

    1. 首页布局 // 顶部DIV#top{ position:absolute; top:; left:; width:100%; height:15%; overflow:hidden; margi ...

  3. 电子工程师名片——FAT16文件系统(转)

    源:电子工程师名片——FAT16文件系统 从8月8号开始,连续一个月利用每天下班时间和周末的时间终于初步完成了一个电子工程师的电路板名片,就像U盘一样,不过这个FLASH只有64KB的大小,用的单片机 ...

  4. php dependency innjection

    You’ve probably heard of the acronym SOLID by now, which is an object oriented programming paradigm ...

  5. SVN参考命令

    SVN 命令参考(svn command reference) 用法: svn <subcommand> [options] [args]Subversion 命令行客户端,版本 1.6. ...

  6. Sequence Classification

    Natural Language Processing with Python Charpter 6.1 import nltk from nltk.corpus import brown def p ...

  7. laravel5 html引用问题

    1. Composer 安装 编辑 composer.json 文件, require 节点下增加: "illuminate/html": "~5.0" 然后 ...

  8. iOS开发之监听键盘高度的变化 分类： ios技术 2015-04-21 12:04 233人阅读 评论(0) 收藏

    最近做的项目中,有一个类似微博中的评论转发功能,屏幕底端有一个输入框用textView来做,当textView成为第一响应者的时候它的Y值随着键盘高度的改变而改变,保证textView紧贴着键盘,但又 ...

  9. Linux怎样访问Windows共享文件和文件夹

    常常使用Windows的人可能会发现,Windows计算机之前共享资料非常方便,但是有时候想玩玩Linux的时候,如Fedora.Ubuntu.CentOS等,该怎样才能访问Windows计算机上的文 ...

  10. js传递数组到后台

    //post方法不得行,各种问题...改为ajax就阔以了.//默认的话,traditional为false,即jquery会深度序列化参数对象,以适应如PHP和Ruby on Rails框架, // ...