非常教程

HTML 参考手册教程

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

HTML canvas 参考手册

实例

下面的代码通过 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);
}

尝试一下 »

浏览器支持

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

HTML canvas putImageData() 方法

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 putImageData() 方法。

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。


定义和用法

putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。

提示:请参阅 getImageData() 方法,它可复制画布上指定的矩形的像素数据。

提示:请参阅 createImageData() 方法,它可创建新的空白 ImageData 对象。


JavaScript 语法

JavaScript 语法: context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

参数值

参数 描述
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标,以像素计。
y ImageData 对象左上角的 y 坐标,以像素计。
dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。
dirtyY 可选。垂直值(y),以像素计,在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。


HTML canvas putImageData() 方法

HTML canvas 参考手册
HTML canvas putImageData() 方法
HTML 参考手册

HTML 参考手册提供了完整的 HTML 标签、属性、事件列表,并配有具体的实例演示,另外还讲解了拾色器、字符集等相关内容。

HTML 参考手册目录

1.HTML 事件
2.HTML 全局属性
3.HTML 标签列表(功能排序)
4.HTML 标签列表(字母排序)
5.HTML <option> 标签
6.HTML <output> 标签
7.HTML <p> 标签
8.HTML <param> 标签
9.HTML <pre> 标签
10.HTML 拾色器
11.HTML 颜色名
12.HTML 有效DOCTYPES
13.HTML 音频/视频
14.HTML 画布
15.HTML5 <mark> 标签
16.HTML <menu> 标签
17.HTML <meta> 标签
18.HTML <meter> 标签
19.HTML <nav> 标签
20.HTML <noframes> 标签
21.HTML <noscript> 标签
22.HTML <object> 标签
23.HTML <ol> 标签
24.HTML <optgroup> 标签
25.HTML <img> 标签
26.HTML <input> 标签
27.HTML <ins> 标签
28.HTML <kbd> 标签
29.HTML5 <keygen> 标签
30.HTML <legend> 标签
31.HTML <li> 标签
32.HTML <label> 标签
33.HTML <link>标签
34.HTML <map> 标签
35.HTML <area> 标签
36.HTML <applet> 标签
37.HTML <address> 标签
38.HTML <acronym> 标签
39.HTML <abbr> 标签
40.HTML <a> 标签
41.HTML <!DOCTYPE> 声明
42.HTML <button> 标签
43.HTML <i> 标签
44.HTML <iframe> 标签
45.HTML <blockquote> 标签
46.HTML <big> 标签
47.HTML <bdo> 标签
48.HTML <bdi> 标签
49.HTML <basefont> 标签
50.HTML <base> 标签
51.HTML <b> 标签
52.HTML <audio> 标签
53.HTML <aside> 标签
54.HTML <article> 标签
55.HTML <command> 标签
56.HTML <colgroup> 标签
57.HTML <col> 标签
58.HTML <code> 标签
59.HTML <cite> 标签
60.HTML <center> 标签
61.HTML <caption> 标签
62.HTML <canvas> 标签
63.HTML <br> 标签
64.HTML <body> 标签
65.HTML <dt> 标签
66.HTML <dl> 标签
67.HTML <div> 标签
68.HTML <dir> 标签
69.HTML <dialog> 标签
70.HTML <dfn> 标签
71.HTML <details> 标签
72.HTML <del> 标签
73.HTML <dd> 标签
74.HTML <datalist> 标签
75.HTML <frameset> 标签
76.HTML <frame> 标签
77.HTML <form> 标签
78.HTML <footer> 标签
79.HTML <font> 标签
80.HTML <figure> 标签
81.HTML <figcaption> 标签
82.HTML <fieldset> 标签
83.HTML <embed> 标签
84.HTML <em> 标签
85.HTML URL 编码参考手册
86.HTML 符号实体参考手册
87.HTML ISO-8859-1 参考手册
88.HTML ASCII 参考手册
89.HTML 字符集
90.HTML <hr> 标签
91.HTML <h1> – <h6> 标签
92.HTML <hgroup> 标签
93.HTML <header> 标签
94.HTML <head> 标签
95.HTML <q> 标签
96.HTML5 <progress> 标签
97.HTML <html> 标签
98.HTML <!–…–> 注释标签
99.键盘快捷键
100.HTTP 方法:GET 对比 POST