开发手册HTMLCSSJavaScript
HTML手册HTMLXHTMLHTML 5HTML相关标签列表(字母排序)标签列表(功能排序)HTML 属性HTML 事件HTML 视频/音频HTML 画布HTML 文档类型HTML 颜色名HTML 字符集HTML ASCIIHTML ISO-8859-1HTML 符号HTML URL 编码HTML 语言代码HTTP 消息HTTP 方法<!--><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><command><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> - <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><keygen><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><table><tbody><td><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video><wbr>HTML 元信息基本的 HTML 标签HTML 教程延伸阅读:改变文本的外观和含义HTML 样式Web 品质 - 重要的 HTML 元素HTML <a> 标签的 charset 属性HTML <a> 标签的 coords 属性HTML <a> download 属性HTML <a> 标签的 href 属性HTML <a> 标签的 hreflang 属性HTML 5 <a> 标签的 media 属性HTML <a> 标签的 name 属性HTML <a> 标签的 rel 属性HTML <a> 标签的 rev 属性HTML <a> 标签的 shape 属性HTML <a> 标签的 target 属性HTML <a> type 属性HTML <area> 标签的 alt 属性HTML <area> 标签的 coords 属性HTML <area> 标签的 href 属性HTML <area> 标签的 nohref 属性HTML <area> 标签的 shape 属性HTML <area> 标签的 target 属性HTML <audio> autoplay 属性HTML <audio> controls 属性HTML <audio> loop 属性HTML <audio> muted 属性HTML <audio> preload 属性HTML <audio> src 属性HTML <base> 标签的 href 属性HTML <base> 标签的 target 属性HTML <basefont> 标签的 color 属性HTML <basefont> 标签的 face 属性HTML <basefont> 标签的 size 属性HTML <blockquote> cite 属性HTML <body> 标签的 alink 属性HTML <body> 标签的 background 属性HTML <body> 标签的 bgcolor 属性HTML <body> 标签的 link 属性HTML <body> 标签的 text 属性HTML <body> 标签的 vlink 属性HTML 5 <button> autofocus 属性HTML <button> 标签的 disabled 属性HTML 5 <button> form 属性HTML 5 <button> formaction 属性HTML 5 <button> formenctype 属性HTML 5 <button> formmethod 属性HTML 5 <button> formnovalidate 属性HTML 5 <button> formtarget 属性HTML <button> 标签的 name 属性HTML <button> 标签的 type 属性HTML <button> 标签的 value 属性HTML <canvas> height 属性HTML <canvas> width 属性HTML <caption> 标签的 align 属性HTML <col> 标签的 align 属性HTML <col> 标签的 char 属性HTML <col> 标签的 charoff 属性HTML <col> 标签的 span 属性HTML <col> 标签的 valign 属性HTML <col> 标签的 width 属性HTML <colgroup> 标签的 align 属性HTML <colgroup> 标签的 char 属性HTML <colgroup> 标签的 charoff 属性HTML <colgroup> 标签的 span 属性HTML <colgroup> 标签的 valign 属性HTML <colgroup> 标签的 width 属性HTML <command> checked 属性HTML <command> disabled 属性HTML <command> icon 属性HTML <command> label 属性HTML <command> radiogroup 属性HTML <command> type 属性HTML <del> 标签的 cite 属性HTML <del> 标签的 datetime 属性HTML <details> open 属性HTML <dir> 标签的 compact 属性HTML <div> 标签的 align 属性HTML 5 <embed> height 属性HTML 5 <embed> src 属性HTML 5 <embed> type 属性HTML 5 <embed> width 属性HTML 5 <fieldset> disabled 属性HTML 5 <fieldset> form 属性HTML 5 <fieldset> name 属性HTML <font> 标签的 color 属性HTML <font> 标签的 face 属性HTML <font> 标签的 size 属性HTML <form> accept-charset 属性HTML <form> 标签的 action 属性HTML 5 <form> autocomplete 属性HTML <form> 标签的 enctype 属性HTML <form> 标签的 method 属性HTML <form> 标签的 name 属性HTML 5 <form> novalidate 属性HTML <form> 标签的 target 属性HTML <frame> 标签的 frameborder 属性HTML <frame> 标签的 longdesc 属性HTML <frame> 标签的 marginheight 属性HTML <frame> 标签的 marginwidth 属性HTML <frame> 标签的 name 属性HTML <frame> 标签的 noresize 属性HTML <frame> 标签的 scrolling 属性HTML <frame> 标签的 src 属性HTML contenteditable 属性HTML contextmenu 属性HTML data-* 属性HTML draggable 属性HTML dropzone 属性HTML hidden 属性HTML spellcheck 属性HTML translate 属性HTML <h1> - <h6> 标签的 align 属性HTML <hr> 标签的 align 属性HTML <hr> 标签的 noshade 属性HTML <hr> 标签的 size 属性HTML <hr> 标签的 width 属性HTML <iframe> 标签的 align 属性HTML <iframe> 标签的 frameborder 属性HTML <iframe> 标签的 height 属性HTML <iframe> 标签的 longdesc 属性HTML <iframe> 标签的 marginheight 属性HTML <iframe> 标签的 marginwidth 属性HTML <iframe> 标签的 name 属性HTML <iframe> 标签的 sandbox 属性HTML <iframe> 标签的 scrolling 属性HTML <iframe> 标签的 seamless 属性HTML <iframe> 标签的 src 属性HTML <iframe> 标签的 srcdoc 属性HTML <iframe> 标签的 width 属性HTML <img> 标签的 align 属性HTML <img> 标签的 alt 属性HTML <img> 标签的 border 属性HTML <img> 标签的 height 和 width 属性HTML <img> 标签的 hspace 和 vspace 属性HTML <img> 标签的 ismap 属性HTML <img> 标签的 longdesc 属性HTML <img> 标签的 src 属性HTML <img> 标签的 usemap 属性HTML <input> 标签的 accept 属性HTML <input> 标签的 align 属性HTML <input> 标签的 alt 属性HTML <input> autocomplete 属性HTML 5 <input> autofocus 属性HTML <input> 标签的 checked 属性HTML <input> 标签的 disabled 属性HTML 5 <input> form 属性HTML 5 <input> formaction 属性HTML 5 <input> formenctype 属性HTML 5 <input> formmethod 属性HTML 5 <input> formnovalidate 属性HTML 5 <input> formtarget 属性HTML 5 <input> height 属性HTML 5 <input> list 属性HTML 5 <input> max 属性HTML <input> 标签的 maxlength 属性HTML 5 <input> min 属性HTML 5 <input> multiple 属性HTML <input> 标签的 name 属性HTML 5 <input> pattern 属性HTML 5 <input> placeholder 属性HTML <input> 标签的 readonly 属性HTML 5 <input> required 属性HTML <input> 标签的 size 属性HTML <input> 标签的 src 属性HTML 5 <input> step 属性HTML <input> 标签的 type 属性HTML <input> 标签的 value 属性HTML 5 <input> width 属性HTML <ins> 标签的 cite 属性HTML <ins> 标签的 datetime 属性HTML <keygen> autofocus 属性HTML <keygen> disabled 属性HTML <keygen> form 属性HTML <keygen> keytype 属性HTML <keygen> name 属性HTML <label> 标签的 for 属性HTML 5 <label> form 属性HTML <legend> 标签的 align 属性HTML <li> 标签的 type 属性HTML <li> 标签的 value 属性HTML <link> 标签的 charset 属性HTML <link> 标签的 href 属性HTML <link> 标签的 hreflang 属性HTML <link> 标签的 media 属性HTML <link> 标签的 rel 属性HTML <link> 标签的 rev 属性HTML 5 <link> sizes 属性HTML <link> 标签的 target 属性HTML <link> 标签的 type 属性HTML <map> 标签的 name 属性HTML <menu> label 属性HTML <menu> type 属性HTML <meter> form 属性HTML <meter> high 属性HTML <meter> low 属性HTML <meter> max 属性HTML <meter> min 属性HTML <meter> optimum 属性HTML <meter> value 属性HTML 5 <object> form 属性HTML <ol> 标签的 compact 属性HTML 5 <ol> reversed 属性HTML <ol> 标签的 start 属性HTML <ol> 标签的 type 属性HTML <optgroup> 标签的 disabled 属性HTML <optgroup> 标签的 label 属性HTML <option> 标签的 disabled 属性HTML <option> 标签的 label 属性HTML <option> 标签的 selected 属性HTML <option> 标签的 value 属性HTML <output> 标签的 for 属性HTML <output> 标签的 form 属性HTML <output> 标签的 name 属性HTML <p> 标签的 align 属性HTML <menu> max 属性HTML <menu> value 属性HTML <q> cite 属性HTML 5 <script> async 属性HTML <script> 标签的 charset 属性HTML <script> 标签的 defer 属性HTML <script> 标签的 src 属性HTML <script> 标签的 type 属性HTML <select> 标签的 autofocus 属性HTML <select> 标签的 disabled 属性HTML <select> 标签的 form 属性HTML <select> 标签的 multiple 属性HTML <select> 标签的 name 属性HTML <select> 标签的 required 属性HTML <select> 标签的 size 属性HTML <source> media 属性HTML <source> src 属性HTML <source> type 属性HTML accesskey 属性HTML class 属性HTML dir 属性HTML id 属性HTML lang 属性HTML style 属性HTML tabindex 属性HTML title 属性HTML <style> 标签的 media 属性HTML <style> 标签的 type 属性HTML <table> 标签的 align 属性HTML <table> 标签的 bgcolor 属性HTML <table> 标签的 border 属性HTML <table> 标签的 cellpadding 属性HTML <table> 标签的 cellspacing 属性HTML <table> 标签的 frame 属性HTML <table> 标签的 rules 属性HTML <table> 标签的 summary 属性HTML <table> 标签的 width 属性HTML <tbody> 标签的 align 属性HTML <tbody> 标签的 char 属性HTML <tbody> 标签的 charoff 属性HTML <tbody> 标签的 valign 属性HTML <td> 标签的 abbr 属性HTML <td> 标签的 align 属性HTML <td> 标签的 axis 属性HTML <td> 标签的 bgcolor 属性HTML <td> 标签的 char 属性HTML <td> 标签的 charoff 属性HTML <td> 标签的 colspan 属性HTML <td> 标签的 headers 属性HTML <td> 标签的 height 属性HTML <td> 标签的 nowrap 属性HTML <td> 标签的 rowspan 属性HTML <td> 标签的 scope 属性HTML <td> 标签的 valign 属性HTML <td> 标签的 width 属性HTML <textarea> 标签的 autofocus 属性HTML <textarea> 标签的 cols 属性HTML <textarea> 标签的 disabled 属性HTML <textarea> 标签的 form 属性HTML <textarea> 标签的 maxlength 属性HTML <textarea> 标签的 name 属性HTML <textarea> 标签的 placeholder 属性HTML <textarea> 标签的 readonly 属性HTML <textarea> 标签的 required 属性HTML <textarea> 标签的 rows 属性HTML <textarea> 标签的 wrap 属性HTML <tfoot> 标签的 align 属性HTML <tfoot> 标签的 char 属性HTML <tfoot> 标签的 charoff 属性HTML <tfoot> 标签的 valign 属性HTML <th> 标签的 abbr 属性HTML <th> 标签的 align 属性HTML <th> 标签的 axis 属性HTML <th> 标签的 bgcolor 属性HTML <th> 标签的 char 属性HTML <th> 标签的 charoff 属性HTML <th> 标签的 colspan 属性HTML <th> 标签的 headers 属性HTML <th> 标签的 height 属性HTML <th> 标签的 nowrap 属性HTML <th> 标签的 rowspan 属性HTML <th> 标签的 scope 属性HTML <th> 标签的 valign 属性HTML <th> 标签的 width 属性HTML <thead> 标签的 align 属性HTML <thead> 标签的 char 属性HTML <thead> 标签的 charoff 属性HTML <thead> 标签的 valign 属性HTML <time> datetime 属性HTML <time> datetime 属性HTML <tr> 标签的 align 属性HTML <tr> 标签的 bgcolor 属性HTML <tr> 标签的 char 属性HTML <tr> 标签的 charoff 属性HTML <tr> 标签的 valign 属性HTML <track> default 属性HTML <track> kind 属性HTML <track> srclang 属性HTML <track> src 属性HTML <track> srclang 属性HTML <ul> 标签的 compact 属性HTML <ul> 标签的 type 属性HTML <video> autoplay 属性HTML <video> controls 属性HTML <video> height 属性HTML <video> loop 属性HTML <video> muted 属性HTML <video> poster 属性HTML <video> preload 属性HTML <video> src 属性HTML <video> width 属性HTML 5 Audio/Video DOM canplay 事件HTML 5 Audio/Video DOM canplaythrough 事件HTML 5 Audio/Video DOM durationchange 事件HTML 5 Audio/Video DOM loadeddata 事件HTML 5 Audio/Video DOM loadedmetadata 事件HTML 5 Audio/Video DOM loadstart 事件HTML 5 Audio/Video DOM progress 事件HTML 5 Audio/Video DOM addTextTrack() 方法HTML 5 Audio/Video DOM canPlayType() 方法HTML 5 Audio/Video DOM load() 方法HTML 5 Audio/Video DOM pause() 方法HTML 5 Audio/Video DOM play() 方法HTML 5 Audio/Video DOM audioTracks 属性HTML 5 Audio/Video DOM autoplay 属性HTML 5 Audio/Video DOM buffered 属性HTML 5 Audio/Video DOM controller 属性HTML 5 Audio/Video DOM controls 属性HTML 5 Audio/Video DOM currentSrc 属性HTML 5 Audio/Video DOM currentTime 属性HTML 5 Audio/Video DOM defaultMuted 属性HTML 5 Audio/Video DOM defaultPlaybackRate 属性HTML 5 Audio/Video DOM duration 属性HTML 5 Audio/Video DOM ended 属性HTML 5 Audio/Video DOM error 属性HTML 5 Audio/Video DOM loop 属性HTML 5 Audio/Video DOM mediaGroup 属性HTML 5 Audio/Video DOM muted 属性HTML 5 Audio/Video DOM networkState 属性HTML 5 Audio/Video DOM paused 属性HTML 5 Audio/Video DOM playbackRate 属性HTML 5 Audio/Video DOM played 属性HTML 5 Audio/Video DOM preload 属性HTML 5 Audio/Video DOM readyState 属性HTML 5 Audio/Video DOM seekable 属性HTML 5 Audio/Video DOM seeking 属性HTML 5 Audio/Video DOM src 属性HTML 5 Audio/Video DOM startDate 属性HTML 5 Audio/Video DOM textTracks 属性HTML 5 Audio/Video DOM videoTracks 属性HTML 5 Audio/Video DOM volume 属性HTML5 canvas addColorStop() 方法HTML5 canvas arc() 方法HTML5 canvas arcTo() 方法HTML5 canvas beginPath() 方法HTML5 canvas bezierCurveTo() 方法HTML5 canvas clearRect() 方法HTML5 canvas clip() 方法HTML5 canvas closePath() 方法HTML5 canvas createImageData() 方法HTML5 canvas createLinearGradient() 方法HTML5 canvas createPattern() 方法HTML5 canvas createRadialGradient() 方法HTML5 canvas drawImage() 方法HTML5 canvas fill() 方法HTML5 canvas fillRect() 方法HTML 5 canvas fillStyle 属性HTML5 canvas fillText() 方法HTML 5 canvas font 属性HTML5 canvas getImageData() 方法HTML 5 canvas globalAlpha 属性HTML 5 canvas globalCompositeOperation 属性HTML 5 canvas data 属性HTML 5 canvas height 属性HTML 5 canvas width 属性HTML5 canvas isPointInPath() 方法HTML 5 canvas lineCap 属性HTML 5 canvas lineJoin 属性HTML5 canvas lineTo() 方法HTML 5 canvas lineWidth 属性HTML5 canvas measureText() 方法HTML 5 canvas miterLimit 属性HTML5 canvas moveTo() 方法HTML5 canvas putImageData() 方法HTML5 canvas quadraticCurveTo() 方法HTML5 canvas rect() 方法HTML5 canvas rotate() 方法HTML5 canvas scale() 方法HTML5 canvas setTransform() 方法HTML 5 canvas shadowBlur 属性HTML 5 canvas shadowColor 属性HTML 5 canvas shadowOffsetX 属性HTML 5 canvas shadowOffsetY 属性HTML5 canvas stroke() 方法HTML5 canvas strokeRect() 方法HTML 5 canvas strokeStyle 属性HTML5 canvas strokeText() 方法HTML 5 canvas textAlign 属性HTML 5 canvas textBaseline 属性HTML5 canvas transform() 方法HTML5 canvas translate() 方法HTML onafterprint 事件属性HTML onbeforeprint 事件属性HTML onblur 事件属性HTML onchange 事件属性HTML onclick 事件属性HTML ondblclick 事件属性HTML onfocus 事件属性HTML onkeydown 事件属性HTML onkeypress 事件属性HTML onkeyup 事件属性HTML onload 事件属性HTML onmousedown 事件属性HTML onmousemove 事件属性HTML onmouseout 事件属性HTML onmouseover 事件属性HTML onmouseup 事件属性HTML onresize 事件属性HTML onselect 事件属性HTML onsubmit 事件属性HTML onunload 事件属性HTML 5 视频/音频参考手册HTML 参考手册HTML 5 Canvas 参考手册HTML <a> 标签HTML <abbr> 标签HTML <acronym> 标签HTML <address> 标签HTML <applet> 标签HTML <area> 标签HTML <article> 标签HTML <aside> 标签HTML <audio> 标签HTML <b> 标签HTML <base> 标签HTML <basefont> 标签HTML <bdi> 标签HTML <bdo> 标签HTML <big> 标签HTML <blockquote> 标签HTML <body> 标签HTML <br> 标签HTML <button> 标签HTML <canvas> 标签HTML <caption> 标签HTML <center> 标签HTML <cite> 标签HTML <code> 标签HTML <col> 标签HTML <colgroup> 标签HTML <command> 标签HTML <!--...--> 标签HTML <datalist> 标签HTML <dd> 标签HTML <del> 标签HTML <details> 标签HTML <dfn> 标签HTML <dialog> 标签HTML <dir> 标签HTML <div> 标签HTML <dl> 标签HTML <!DOCTYPE> 标签HTML <dt> 标签HTML <em> 标签HTML <embed> 标签HTML <fieldset> 标签HTML <figcaption> 标签HTML <figure> 标签HTML <font> 标签HTML <tt> <i> <b> <big> <small> 标签HTML <footer> 标签HTML <form> 标签HTML <frame> 标签HTML <frameset> 标签HTML <frameset> 标签的 cols 属性和 rows 属性HTML <head> 标签HTML <header> 标签HTML <h1> 到 <h6> 标签HTML <hr> 标签HTML <html> 标签HTML <i> 标签HTML <iframe> 标签HTML <img> 标签HTML <input> 标签HTML <ins> 标签HTML <kbd> 标签HTML <keygen> 标签HTML <label> 标签HTML <legend> 标签HTML <li> 标签HTML <link> 标签HTML <map> 标签HTML <mark> 标签HTML <menu> 标签HTML <menuitem> 标签HTML <meta> 标签HTML <meter> 标签HTML <nav> 标签HTML <noframes> 标签HTML <noscript> 标签HTML <object> 标签HTML <ol> 标签HTML <optgroup> 标签HTML <option> 标签HTML <output> 标签HTML <p> 标签HTML <param> 标签HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签HTML <pre> 标签HTML <progress> 标签HTML xmlns 属性HTML <q> 标签HTML <rp> 标签HTML <rt> 标签HTML <ruby> 标签HTML <s> 标签HTML <samp> 标签HTML <script> 标签HTML <section> 标签HTML <select> 标签HTML <small> 标签HTML <source> 标签HTML <span> 标签HTML <strike> 标签HTML <strong> 标签HTML <style> 标签HTML <sub> 标签HTML <summary> 标签HTML <sup> 标签HTML <table> 标签HTML <tbody> 标签HTML <td> 标签HTML <textarea> 标签HTML <textarea> 标签的 wrap 属性HTML <tfoot> 标签HTML <th> 标签HTML <thead> 标签HTML <time> 标签HTML <title> 标签HTML <tr> 标签HTML <track> 标签HTML <tt> 标签HTML <u> 标签HTML <ul> 标签HTML <var> 标签HTML <video> 标签HTML <wbr> 标签W3C XHTML 活动CSS手册JavaScript手册

HTML5 canvas getImageData() 方法

实例

下面的代码通过 getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回画布:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

亲自试一试

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 getImageData() 方法。

注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中。

提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。

例子:

以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

亲自试一试

提示:您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素,并改变其颜色值:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(请见下面的“亲自试一试”实例。)

JavaScript 语法

var imgData=context.getImageData(x,y,width,height);

参数值

参数 描述
x 开始复制的左上角位置的 x 坐标。
y 开始复制的左上角位置的 y 坐标。
width 将要复制的矩形区域的宽度。
height 将要复制的矩形区域的高度。

更多实例

要使用的图像:

The Tulip

使用 getImageData() 来反转画布上的图像的每个像素的颜色。

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反转颜色
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

亲自试一试

关于千图| 赞助千图 |千图首页   Copyright2014千图网   沪ICP备10011451号-6   用时:0.0245秒

千图网提示