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>

 

转载于:https://www.cnblogs.com/stono/p/4670258.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

青岛计算机类职业中学,青岛最好的职业学校有哪些?

青岛海洋职业学校是一所由青岛市教育局批准&#xff0c;国家承认学历的重点中等职业学校。学校占地200余亩&#xff0c;建筑面积5万平方米&#xff0c;在籍学生3975人。学校拥有雄厚的师资力量&#xff0c;以专职教师为主&#xff0c;是一支政治素质好&#xff0c;师德水平高、…

测试1

2018/06/03 测试我的随笔转载于:https://www.cnblogs.com/xixirui/p/9129252.html

使用Javascript正则表达式来格式化XML内容

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><meta http-equivcontent-type content"text/html; charsetUTF-8"><title>Xml格式化…

mysql vfp_vfp+mysql问题|交流区 - 梅子Visual FoxPro 编程 - Powered by phpwind

感谢楼上,请现场指导,拜谢c_pzwhfiellist""c_pzwhbglist""For i1 To Fcount()-1c_pzwhfiellistc_pzwhfiellistField(i)","c_pzwhbglistc_pzwhbglistField(i)Space(1)"pzwhk."Field(i)","Chr(10)Endforc_pzwhfiellistc_pzwhf…

Nginx 笔记与总结(3)配置虚拟主机

Nginx 重启的另外一种方式&#xff0c;相当于 kill -HUP cat /usr/local/nginx/logs/nginx.pid&#xff1a; /usr/local/nginx/sbin/nginx -s reload停止 Nginx 的另外一种方式&#xff1a; /usr/local/nginx/sbin/nginx -s stop重读日志文件的另一种方式&#xff0c;相当于 …

计算机如何查找目标,如何使用命令行查找计算机地理位置? | MOS86

有多种方法可以从IP地址中了解计算机的位置&#xff0c;但如果您决定使用命令行查找信息&#xff0c;那么您如何处理&#xff1f;今天今天的问题Screenshot由Paul Fenwick(Flickr)提供。问题SuperUser阅读器AlikElzin-kilaka想知道如何找到一台电脑首先&#xff0c;AlikElzin-k…

Nmap命令的常用实例

一、Nmap简介 nmap是一个网络连接端扫描软件&#xff0c;用来扫描网上电脑开放的网络连接端。确定哪些服务运行在哪些连接端&#xff0c;并且推断计算机运行哪个操作系统&#xff08;这是亦称 fingerprinting&#xff09;。它是网络管理员必用的软件之一&#xff0c;以及用以评…

mysql sqlexception_c-很奇怪-mysql的sql :: SQLException未被其类型捕...

我正在使用带有此(稍微简化)代码的mysql c连接器.try{statement->setString(1, word);statement->executeUpdate();}catch( sql::SQLException& e ){// I dont get herereturn sqlerrno_to_error_code( e.getErrorCode() );}catch( std::exception& e ){// I do …

Linux Kernel系列 - 黄牛X内核代码凝视

Hanks.Wang - 专注于操作系统与移动安全研究。Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM Mail - byhankswanggmail.com 牛X的内核代码凝视 大牛的代码质量高稳定性好&#xff0c;并且逻辑清晰易读性比較强&#xff0c;今天看到Linux Kernel红黑树的代码时&a…

电子商务计算机网络安全技术教案,网络安全技术教案.pdf

名师精编 优秀教案《网络安全技术》教案2011-2012 第 2 学期适用班级&#xff1a; 2010 级计算机网络技术专业编写&#xff1a;徐英武名师精编 优秀教案第 1~2 课时周次 &#xff11; 日期 2012 年 02 月 14 日 授课班级 2010 级计算机网络技术课题 网络安全概述 课 型 理论课教…

技术文章汇总

点击以下链接&#xff0c;可以查看相关技术文章&#xff1a;包括APP软件开发、手机软件开发、嵌入式开发、Java和C/C编程&#xff0c;同时涉及原型设计、效果图设计、切图、网络、多媒体、加密、字符编码、通信原理、测试和项目管理等各方面的知识。APP开发实战手机开发实战技术…

咋样查mysql的url_eclipse用jdbc连接mysql数据库时,url是填什么?怎样找出地址?

展开全部 jdbc连接mysql数据62616964757a686964616fe78988e69d8331333337623535库的url为: jdbc:mysql://主机名或IP抵制:端口号/数据库名?useUnicode=true&characterEncoding=UTF-8 jdbc连接其他数据库的连接字符串写法为:1、Oracle8/8i/9i数据库(thin模式) Class.for…

HP服务器ile进系统,HP GEN10服务器UEFI安装Windows Sverver 2012 R2教程

1.操作系统&#xff1a;Windows Server 2012 R2 VL with Update (x64) – DVD (Chinese-Simplified)&#xff0c;MSDN下载地址&#xff1a;ed2k://|file|cn_windows_server_2012_r2_vl_with_update_x64_dvd_6052729.iso|5545527296|BD499EBCABF406AB82293DD8A5803493|/2.镜像写…

[程序设计语言] 堆和栈的全面总结

操作系统堆栈&#xff1a; 分配由编译器自己主动和自己主动释放。对应于堆栈的函数。参数存储功能值、函数调用结束后完成值和局部变量的函数体内。段内存空间。其操作和组织方式与数据结构中的栈十分相似。栈是为了运行线程留出的内存空间。当调用函数时创建栈。当函数运行完毕…

py文件的操作

文件操作基本流程。 计算机系统分为&#xff1a;计算机硬件&#xff0c;操作系统&#xff0c;应用程序三部分。 我们用python或其他语言编写的应用程序若想要把数据永久保存下来&#xff0c;必须要保存于硬盘中&#xff0c;这就涉及到应用程序要操作硬件&#xff0c;众所周知&a…

CentOS系统启动流程你懂否

一、Linux内核的组成相关概念&#xff1a;Linux系统的组成部分&#xff1a;内核根文件系统内核&#xff1a;进程管理、内存管理、网络协议栈、文件系统、驱动程序。IPC(Inter-Process Communication进程间通信):就是指多个进程之间相互通信&#xff0c;交换信息的方法。Linux I…

怎样用css设置图片下的投影,css – 做这种投影的最佳方法是什么?

如果您更喜欢使用CSS来创建该类型的阴影,则可以将CSS3用作seen here!CSS/* Lifted corners */.lifted {-moz-border-radius:4px;border-radius:4px;}.lifted:before,.lifted:after {bottom:15px;left:10px;width:50%;height:20%;max-width:300px;-webkit-Box-shadow:0 15px 10p…

mysql 排版 指令_Mysql语句排版

SQL 高效排版指北统一 SQL 排版的相关用法&#xff0c;极大提高编写和维护 SQL 的效率。注: column 选取的字段&#xff1b;table 选取的表名语句结构错误SELECT column1 FROM table1 ORDER BY column1正确SELECTcolumn1FROMtable1ORDER BYcolumn1解析SQL 语句在内部执行时会…

Linux命令学习手册-tr命令 2015-07-26 20:35 9人阅读 评论(0) 收藏...

tr [OPTION]... SET1 [SET2] [功能] 转换或者删除字符。 [描述] tr指令从标准输入设备读取数据&#xff0c;经过字符串转译后&#xff0c;输出到标准输出设备。 通过使用 tr&#xff0c;您可以非常容易地实现 sed 的许多最基本功能。您可以将 tr 看作为 sed 的&#xff08…

css商品,商品标签例子——CSS3 transform 属性

积累很重要。从此开始记录前端生涯的点滴....div{width:150px;height:30px;background-color:#f83944;/* Rotate div */transform:rotate(-40deg);-ms-transform:rotate(-40deg); /* Internet Explorer */-moz-transform:rotate(-40deg); /* Firefox */-webkit-transform:rotat…