Canvas createImageData
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的更多相关文章
- [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- javascript canvas全部API
HTMLCanvasElement//canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可绘制的上下文 t ...
- js封装、简单实例源码记录
1.运动封装:doMove ( obj, attr, dir, target, endFn ) 加入回调.&&.||用法注释 <script> var oBtn1 = d ...
- (私人收藏)[开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例)
[开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0Aj9y ...
- HTML5 Canvas ( 创建图形对象 ) createImageData
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- 相识HTML5 canvas
Canvas是HTML的API,我们可以用它在网页中实时的来生成图像. 文章导读 1.必备技能 2.用于画图的函数 例子: -会话气泡- -心形- -钟表- -星球里的星星- - ...
- 使用canvas截图或者改变灰度
简述 html5新添加的canvas API可以让我们对画布进行开发应用,典型的是可以使用canvas截图或者 手工绘制“迷你图”(即嵌入在文本中的高清小图片). 实现截图的方法很简单,就是创建一个c ...
随机推荐
- vmware中的bridge、nat、host-only的区别
概述: VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模 ...
- 由获取子元素的方法find和children所获
html代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- [iOS]C语言技术视频-05-程序循环结构(do{}while();)
下载地址: 链接: http://pan.baidu.com/s/1c02ke3m 密码: x97w
- linux下 mysql 学习(一)
1.登录mysql [root@test1 local]# mysql Welcome to the MySQL monitor. Commands end with ; or g. Your My ...
- 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- Nginx Image Module图片缩略图 水印处理模块
Nginx Image Module图片缩略图 水印处理模块 下载Tengine tar -zxvf tengine-1.4.5.tar.gz cd tengine-1.4.5 下载Nginx tar ...
- 子数涵数·C语言——循环语句
之前,我们讲过了编程中的三种结构(顺序.条件.循环),现在我们来看一下循环语句如何编写. 一.while循环语句(先判断后执行) 1 #include<stdio.h> 2 int m ...
- JAVA基础--事务处理
事务处理: 1. 取消掉自动提交 set autocommmit=0 2. 开始事务 bigin 3. 进行一系列操作 update 4. 如果操作全部合格, 提交事务 commit 5. 如果发 ...
- opencv图像特征检测之斑点检测
前面说过,图像特征点检测包括角点和斑点,今天来说说斑点,斑点是指二维图像中和周围颜色有颜色差异和灰度差异的区域,因为斑点代表的是一个区域,所以其相对于单纯的角点,具有更好的稳定性和更好的抗干扰能力. ...
- TCP协议和UDP协议的区别
1. TCP协议面向连接. UDP协议面向非连接 (有无链接)2. TCP协议传输速度慢. UDP协议传输速度快 (传输速度)3. TCP协议保证数据顺序. UDP协议不保证 (数据的有序性. 在IP ...