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. 简单三段式状态机实验2-LCD12864

    此实验是在“基于I2C EPPRPM(AT24C02B) + LCD12864实验”基础上,把LCD模块里的一段式状态机改成三段式,I2C EPPROM模块暂时未改出来,一步一步来吧,改完后代码下载到 ...

  2. 事件g_Events

    // Events.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include & ...

  3. Bundle versions string, short与Bundle version

    在提交更新的app至appstore中时,需要在**.plist中设置app的version信息.Bundle versions string, short --- CFBundleShortVers ...

  4. 使用Visual Studio 2008创建你的第一个Windows Mobile程序介绍

    使用Visual Studio 2008创建你的第一个Windows Mobile程序介绍 Windows MobileMobileWindowsMicrosoftWinForm 介绍 Microso ...

  5. 建立一个属于自己的AVR的RTOS

    建立一个属于自己的AVR的RTOS(序) 建立一个属于自己的AVR的RTOS(第一篇:函数的运行) 建立一个属于自己的AVR的RTOS(第二篇:人工堆栈) 建立一个属于自己的AVR的RTOS(第三篇: ...

  6. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  7. linux动态链接库---一篇讲尽

    一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: tmux: error while loading shared libraries: libevent-1.4.s ...

  8. jquery中，使用append增加元素时，该元素的绑定监听事件失效

    举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...

  9. Docker 命令（二）

    Docker 入门 启动docker systemctl start docker 帮助命令 docker --help docker [Commands] --help   例:docker run ...

  10. android gridview画分割线

    dongyangzhang android gridview画分割线,如图: 1.先上图: 2.具体实现代码: public class LineGridView extends GridView { ...